如何实现jQuery分步Logo动画的循环播放？

首先，你的代码里存在一处语法错误：最后一个animate方法的参数末尾多了个逗号，这会导致后续回调函数无法正常执行，先修正这个问题。

要实现循环播放，最可靠的方式是在最后一步动画完成的回调里递归调用move函数，这样能保证上一轮动画完全结束后才启动下一轮，避免动画队列混乱。

修正后的完整代码 #

function move(step1, step2, step3, step4, step5) {
    $('.pupil').animate({
        left: '+=' + step1,
    }, 800, function() {
        $(this).animate({
            top: '+=' + step2,
       }, 800, function() {
            $(this).animate({
                left: '+=' + step3,
            }, 800, function(){
                $(this).animate({
                    top: '+=' + step4,
                }, 800, function() {
                    $(this).animate({
                        left: '+=' + step5,
                    }, 800, function() {
                        // 最后一步完成后递归调用，实现循环
                        move(step1, step2, step3, step4, step5);
                    });
                })
            });
        });   
    });
}
$(function() {
   move(2, 2, -4, -2, 2);
});

为什么之前的尝试失败？ #

• 用setInterval调用move：动画是异步执行的，setInterval会按固定间隔触发，不管上一轮动画是否完成，导致多个动画任务堆积在队列中，最终元素位置混乱，看起来像动画失效。
• 添加第六步调用函数后停止：大概率是语法错误（比如你代码里的多余逗号）导致回调未被正确执行，循环直接中断。

优化建议：避免嵌套回调地狱 #

如果后续要增加更多动画步骤，嵌套回调会越来越难维护，可以把步骤存入数组，用递归函数依次执行：

function animateSteps($element, steps, duration) {
    if (steps.length === 0) {
        // 所有步骤完成后，重新初始化步骤数组并启动循环
        animateSteps($element, [
            {left: '+=' + 2},
            {top: '+=' + 2},
            {left: '+=' + -4},
            {top: '+=' + -2},
            {left: '+=' + 2}
        ], 800);
        return;
    }
    // 取出第一个步骤执行
    const currentStep = steps.shift();
    $element.animate(currentStep, duration, function() {
        animateSteps($element, steps, duration);
    });
}

$(function() {
    animateSteps($('.pupil'), [
        {left: '+=' + 2},
        {top: '+=' + 2},
        {left: '+=' + -4},
        {top: '+=' + -2},
        {left: '+=' + 2}
    ], 800);
});

这种写法更清晰，后续修改步骤只需调整数组内容即可，维护性更强。

内容的提问来源于stack exchange，提问作者pastyprincess