jquery - 如何在 jquery 中级联动画

Question

我创建了 3 个 div 元素，我需要一组图像来穿过这些框，通过在一个框中显示图像，然后是下一个，然后每 5 秒无限循环显示下一个图像，逐个移动。

我希望图像一个接一个地淡出(在触发下一个框淡出之前有半秒的间隙)，所以看起来它们是级联淡出的，我希望淡出持续一秒钟，然后让该框中的新图像要淡入，大约需要一秒钟，下一个框会以半秒的间隔触发淡入。

我让它们循环，但没有级联，有人可以为我提供问题的解决方案吗？以下是我当前的代码:

<div id="box1"></div><div id="box2"></div><div id="box3"></div>
<script type="text/javascript">
//<![CDATA[
var test = ['img1.jpg','img2.jpg','img3.jpg'];
function loopImages()
{
    // swap image positions in array
    var fimg = test.shift();
    test.push(fimg);
    for (a in test) {
        var newimage = $('<img />').attr('src',test[a]);
        var currbox = $('#box' + (Math.floor(a)+1));
        //first fade out
        currbox.find('img').fadeTo('slow',0);
        // then add new image
        currbox.empty().append(newimage);   
    }
    // loop every 5 seconds
    setTimeout("loopImages()",5000);
}
loopImages();
//]]>
</script>

Answer 1

像这样的事情应该可以解决问题:

var test = ['img1.jpg','img2.jpg','img3.jpg'];
function loopImages() {
    var fimg = test.shift();
    test.push(fimg);
    $.each(test, function(i, img) {
        var newimage = $('<img />').attr('src',img);
        $('#box' + (i+1)).find('img').delay(i*1000).fadeTo('slow',0, function() {
          $(this).html(newimage); //shortcut for .empty().append()
        });
    });
    setTimeout(loopImages, 5000);
}
$(loopImages);

使用.delay()并乘以您在数组中的索引，您的动画将交错排列。另外，我猜你想在淡入淡出完成后执行更改操作，所以在 .fadeTo() 中执行此操作。回调。

其他更改:当文档准备好时运行 loopImages，将引用(不是字符串)传递给 setTimeout() ，并使用传统的 for 循环来迭代数组(这里不要使用 for...in，它是 for >枚举)。