3个过渡，过渡之间的暂停时间 [英] 3 transitions, pausetime between transitions

问题描述

我想获得:

淡出1°图像->淡入1°图像->等待2秒->淡出2°图像->淡入2°图像->等待2秒->淡出3°图像->淡入3°图像->等待2秒->淡出1°图像......

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 SECONDS -> fadeOut 1° image......

代码如下:

<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/

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

推荐答案

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

All you really need to do is set the delay and timeout options appropriately. You can use the index of each group to increase the initial delay option and then subtract out the total animation time from it so your animation starts immediately. Example:

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

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

Updated the fiddle for you, should be what you're looking for: http://jsfiddle.net/5e7X7/3/

这篇关于3个过渡，过渡之间的暂停时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！