3个转换，转换之间的暂停时间答案

【问题标题】：3 transitions, pausetime between transitions3个转换，转换之间的暂停时间
【发布时间】：2013-03-01 02:06:40
【问题描述】：

我要获取：

fadeOut 1° image -> fadeIn 1° image -> WAIT 2 SECONDS ->fadeOut 2° image -> fadeIn 2° image -> WAIT 2 SECONDS -> fadeOut 3° image -> fadeIn 3° image -> 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/

【问题讨论】：

请将代码中的 cmets 更改为英文。

标签： javascript jquery jquery-cycle jcycle

【解决方案1】：

您真正需要做的就是适当地设置延迟和超时选项。您可以使用每个组的索引来增加初始延迟选项，然后从中减去总动画时间，以便您的动画立即开始。示例：

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

为你更新了小提琴，应该是你要找的：http://jsfiddle.net/5e7X7/3/

【讨论】：

谢谢，这正是我要找的。span>