jquery - jQuery图像淡入淡出序列？

Question

我有一个关于 jQuery 和图像褪色的问题。我有一堆图像，当您加载页面时，我想将每个图像依次淡化为完全不透明。我的html代码如下：

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title</h2>
   <p>Caption</p></div>
</div>

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title 2</h2>
   <p>Caption 2</p></div>
</div>

每张图片都有自己对应的标题和标题，分别显示在另一个下方。我想让第一个图像先淡入，然后让后面的每个图像淡入。有人有想法吗？我对jQuery有一个非常基本的了解。谢谢

Answer 1

您需要对动画进行排队，然后在前一个结束时开始每个动画：

<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />

var animations = new Array();
// queue all
$("img").each(function() {
    animations.push($(this));
});

// start animating
doAnimation(animations.shift());

function doAnimation(image) {
    image.fadeIn("slow", function() {
        // wait until animation is done and recurse if there are more animations
        if(animations.length > 0) doAnimation(animations.shift());
    });
}

Answer 2

您还可以通过延迟每个后续图像的效果来依次淡入它们（注意：我使用 window.load 来确保在开始动画之前加载所有图像）：

$(window).load(function() {

        var delay = 0;

        $('img').each(function() {
            $(this).delay(delay).fadeIn();
            delay += 150;
        });

    });

这对于重叠动画非常有用，而不是等待每个动画完成。它也可以像这样随机化：

$(window).load(function() {

        var delay = 0;

        $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() {
            $(this).delay(delay).fadeIn(600);
            delay += 150;
        });

    });

Answer 3

这可能不是您需要自己实现的东西，请查看jQuery Cycle Plugin。