如何一次一个地（而不是一次全部）设置一组jQuery对象的动画

我正在尝试建立一个图片滑块。（我知道有很多插件，但这更多是出于教育目的）

基本上，我有一组z索引为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);
}

对于（var i=0；i使用a，如下所示：

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

由于这使用了作为回调的第一个参数传递的元素的索引，第一个延迟了
3000*0
ms，所以根本没有，第二个延迟了3000ms，等等……因此它们一个接一个地进行动画处理。
如果不想使用
延迟
，请使用
.queue（）
来设置它们，您可以使用递归函数执行类似的操作

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);

函数动画图像（图像，i）{
$（this.css）({
“不透明度”：“0.0”，
“z索引”：“1”
}）制作动画({
不透明度：“1.0”
}，3000，函数（）{
var next=i+1；
            
如果（下一步
A
.queue
是每个元素，因此您必须将这些元素排队到某个随机DOM元素上才能使其工作…有点混乱。公平评论+1：就个人而言，我宁愿使用这种方法。我过去曾尝试过使用.delay，并且遇到系统和浏览器在动画方面遇到问题，因为它们不是进程快速浏览项目。使用延迟（就像使用setInterval）依赖于客户端系统和浏览器javascript引擎的处理能力。非常感谢。由于某种原因，我没有收到关于这篇文章答案的通知，并且假设没有人回答。不过，谢谢！