Question

我的动画功能出现问题。我希望它只运行一次，但它没有。我尝试使用.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);


        });

    }
});

在这个问题上更容易看到问题：

http://jsfiddle.net/etBLj/

我该如何解决这个问题？

提前致谢！

Answer 1

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

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

小提琴：http://jsfiddle.net/etBLj/1/

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

jQuery动画运行了很多次

1 个答案: