如何逐个动画一组jQuery对象（而不是同时动画）

Question

我正在尝试构建一个图片滑块（幻灯片）。（我知道有很多插件可用，但这更多是为了教育目的。）

基本上，我有一组带有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);
}

我知道我在做一些错误的事情，但我无法弄清楚具体是什么。如果有人能提供帮助，那将不胜感激！

- Marvin Alejandro Herrera

Answer 1

使用.delay()，像这样：

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

由于这个使用传递给.each()回调的第一个参数元素的索引，因此第一次延迟 3000*0毫秒，也就是不延迟，第二次延迟3000毫秒，以此类推……所以它们一个接一个地动画效果。

- Nick Craver

---

非常感谢。由于某些原因，我没有收到有关此帖子答案的通知，并且认为没有人回答。不过还是谢谢！ - Marvin Alejandro Herrera

Answer 2

如果您不想使用delay（这是我会做的方式），您可以使用递归函数来实现类似的效果。

function animateImage(images, i) {
    $(this).css({
        "opacity" : '0.0',
        "z-index" : "1"
    }).animate({
        opacity: "1.0"
    }, 3000, function() {
        var next = i + 1;
            
        if (next < images.length) {
            animateImage(images, next);
        }
    });
}

animateImage(images, 0);

- lonesomeday

Answer 3

使用.queue()来设置它们http://api.jquery.com/queue/。

- Matt Asbury

---

一个 .queue 是每个元素的，所以你必须将它们排队在某个随机的DOM元素上才能使其工作...有点混乱。 - Nick Craver

公正的评论 +1：个人而言，我宁愿使用这种方法。过去我尝试使用 .delay，但遇到了系统和浏览器在处理动画时处理不够快的问题。使用延迟（就像使用 setInterval 一样）依赖于客户端系统和浏览器 JavaScript 引擎的处理能力。 - Matt Asbury