javascript - jQuery 动画运行很多次

Question

我的动画功能出现问题。我希望它只运行 1 次，但它没有。我尝试使用 .stop(); 来调试它，但这也不起作用，所以现在我不知道如何解决这个问题。

JavaScript:

$(".box").hide();

$(".box").contents().not(".progress").hide();

$(".box").first().show(150, function showNext () {

    var next = $(this).next(".box");

    if (next.length > 0) {

        next.show(150, showNext);

    } else {

        $(".box").contents().not(".progress").fadeIn(800, function () {

        $(".progress").animate({

            width: 'toggle'

        }, 800);


        });

    }
});

在这个 jsfiddle 中更容易看到问题:

http://jsfiddle.net/etBLj/

如何解决这个问题？

提前致谢!

Answer 1

问题是，当您调用 $(".progress").animate() 时，动画将在整个文档的每个具有“progress”类的元素上执行/强>。由于 showNext() 是递归调用的，因此最终每个匹配元素都会有多个动画。

您需要做的就是将对 animate 的调用限制为适用于递归循环中的当前元素。因此，更改为 $(this).next().animate 就可以了。

fiddle :http://jsfiddle.net/etBLj/1/

此外，我认为如果将“标题的显示”与“进度条的动画”分开，并用简单的 each 循环替换递归函数，JavaScript 会变得更容易理解。例如:http://jsfiddle.net/etBLj/2/