Javascript jQuery动画运行了很多次

我的动画功能有问题。我希望它只运行一次，但它没有。我尝试使用

.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中更容易看到问题：


我如何解决这个问题

提前谢谢
 问题是，当您调用
$（“.progress”）.animate（）
时，整个文档的每个元素上都会执行动画，并使用“progress”类。由于递归调用了
showNext（）
，因此每个匹配元素都有多个动画

您需要做的就是限制对
animate
的调用，使其适用于递归循环中的当前元素。因此，更改为
$（this）.next（）。设置动画
，它就会工作

小提琴：

此外，我认为如果将“标题显示”与“进度条动画”分开，并用一个简单的
循环替换递归函数，JavaScript将变得更容易理解。例如：
谢谢，它成功了！也谢谢你的回答！