jquery - 如何一次为一组 jQuery 对象制作动画(而不是一次全部动画)

Question

我正在尝试构建一个图片 slider 。 (我知道有很多插件，但这更多是出于教育目的)。

基本上，我有一组 z-index: 0 的图像。我想做的是获取这组图像，然后选择每个图像并将索引更改为 1，设置不透明度动画，然后然后将其放回 0，以便下一个图像将执行相同的操作。

这是第一部分，但我遇到的问题是，当我测试这部分时，所有图像同时执行动画。而不是一件接一件地做。我知道您可以使用回调函数，例如:

image1.animate(the animation, function({
       image2.animation(the animation, function({
                image3.animation(the animation, function}) etc...

})

但是如果我有更多图像，它会变得更加复杂。我正在尝试找到一种更有效的方法来做到这一点，但我没有找到答案。

这是我尝试过的:

images.each(function () {
    $(this).css({
        "opacity" : "0.0",
        "z-index" : "1"
    }).animate({
        opacity: "1.0"
    }, 3000);
});

但它不起作用。所有图像同时执行动画。我什至尝试使用“for”循环，但我得到了同样的结果:

for (var i=0; i<images.length; i++){
    images.eq(i).css({
        "opacity" : "0.0",
        "z-index" : "1"
    }).animate({
        opacity: "1.0"
    }, 3000);
}

我知道我做错了什么，但我不知道它是什么。如果有人有任何帮助，我们将不胜感激!

Answer 1

使用 .delay() ，像这样:

images.each(function (i) {
    $(this).delay(3000*i)
           .css({ opacity : 0, "z-index": 1 })
           .animate({ opacity: 1 }, 3000);
});

因为这使用作为第一个参数传递给.each()的元素的索引。回调第一个延迟了 3000*0ms，所以根本没有，第二个延迟了 3000ms，等等......所以它们一个接一个地动画化。