3次轉換，轉換之間pausetime

Question

欲獲得：

淡出1°圖像 - >淡入1°圖像 - > WAIT 2秒 - >淡出2°圖像 - >淡入2°圖像 - > WAIT 2秒 - >淡出3°圖像 - >淡入3°圖像 - > WAIT 2秒 - >淡出1°圖像......

下面的代碼：

<div class="container"> 
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /> 
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" /> 
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /> 
<img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00001.jpg" /> 
<img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00002.jpg" /> 
<img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00003.jpg" /> 
<img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00004.jpg" /> 
<img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00005.jpg" /> 
<img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00006.jpg" /> 
</div> 

JS：

var numberOfGroups = 3; 
var arrayOfArray = new Array(numberOfGroups); 
for(var i = 0; i < numberOfGroups; i++) 
{ 
    arrayOfArray[i] = new Array(); 
} 
var imagesElements = $('.container').children(); 
imagesElements.each(function(localIndex){ 
    //partiziono le immagini in insiemi in base all'ordine in cui le trova in partenza 
    arrayOfArray[localIndex % numberOfGroups].push(imagesElements[localIndex]); 
}); 
$('.container').empty(); 
for(var j = 0; j < arrayOfArray.length; j++) 
{ 
    //crea un nuovo div contenitore contenente le immagini come sono nell'array 2-dimensioni creato 
    var newDivContainer = document.createElement('div'); 
    newDivContainer.setAttribute('id', 'block_'+j); 
    for(var k = 0; k < arrayOfArray[j].length; k++) 
    { 
     newDivContainer.appendChild(arrayOfArray[j][k]); 
    } 

    $('.container').append(newDivContainer); 
} 

var newGroups = $('.container').children(); 
newGroups.each(function(thisIndex){ 
    $(newGroups[thisIndex]).cycle({ 
     fx:  'fade', 
     delay: 2000, 
     speed: 2000, 
     //continuous: 1, 
     timeout: 2000*numberOfGroups, 
     //sync: 0, 
     after: function(){ 
      var x = '#block_'+((thisIndex+1) % numberOfGroups); 
      change(x); 
      //window.setTimeout(change, 4000, x); 
     } 
    }); 
}); 

function change(what) 
{ 
    jQuery(what).cycle("next"); 
} 

JSFIDDLE：http://jsfiddle.net/linuxatico/5e7X7/

Answer 1

您真正需要做的就是適當設置延遲和超時選項。您可以使用每個組的索引來增加初始延遲選項，然後從中減去總動畫時間，以便立即開始動畫。例如：

var animationDelay = 4000*numberOfGroups - 2000; 
$("#test").cycle({ 
    delay: (4000 * thisIndex) - animationDelay, 
    speed: 2000, 
    timeout: animationDelay 
}); 

更新了你的小提琴，應該是你在找什麼：http://jsfiddle.net/5e7X7/3/