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

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

Answer 3

你也可以通过延迟每个后续图像的效果来依次淡化它们（注意：我正在使用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;
        });

    });

jQuery图像淡化序列？

3 个答案: