jQuery while循环不工作

Question

我只是想弄清楚如何使用相同的类循环遍历元素并一次动画一个.我认为这虽然循环可行,但我不明白为什么它不会.

$(document).ready(function() {
    var index = 0;
    var images = $('.image');

    while (index < images.length) {
        var image = images[index];
        image.animate({
            opacity: "1"
        }, 1000, function() {
            index++;
        });
    };
});

继承人小提琴

Answer 1

index++在动画后执行的回调中调用.只有在此脚本停止执行后才会启动动画.

因此,index++永远不会执行,循环永远不会结束.

您需要将其重写为递归函数.现在调用的事件处理程序index++实际上需要负责设置下一个动画.

Answer 2

这是@Evert 在另一个答案中精辟解释的简单实现.

在这里引用他们的答案

index ++在动画后执行的回调中调用.只有在此脚本停止执行后才会启动动画.

因此,index ++永远不会被执行,循环永远不会结束.

您需要将其重写为递归函数.现在调用index ++的事件处理程序实际上需要负责设置下一个动画.

实现可以是这样的

var index = 0;
var images = $('.image');
animate(images);

function animate() {
    var image = images.eq(index);
    image.animate({
        opacity: "1"
    }, 1000, function () {
        index++;
        animate();
    });
}

演示https://jsfiddle.net/dhirajbodicherla/w4cgctyk/2/