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

我知道我做错了什么，但我无法弄清楚它是什么。如果有人有任何帮助，将不胜感激！

Answer 1

使用.delay()，如下所示：

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

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

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

Answer 3

使用.queue()设置http://api.jquery.com/queue/

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

3 个答案: