使用setTimeout的jQuery函数动画正在运行一次

setTimeout 是 JavaScript 中的一个函数，用于在指定的毫秒数后执行一个函数或一段代码。它通常用于延迟执行代码或在一段时间后执行某个操作。然而，setTimeout 并不是专门用于创建动画的，尽管它可以用于实现简单的动画效果。

基础概念

setTimeout: 这是一个定时器函数，允许你在指定的延迟时间后执行一次代码。
jQuery: 是一个流行的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

动画运行一次的原因

当你使用 setTimeout 来执行 jQuery 动画时，动画只会运行一次，因为 setTimeout 只会在指定的延迟时间后执行一次回调函数。如果你希望动画重复运行，你需要再次调用 setTimeout 或者使用更适合动画的函数，如 setInterval 或 jQuery 的 .animate() 方法结合回调函数。

解决方案

如果你想要动画连续运行，可以使用 setInterval 或者在 jQuery 动画的回调函数中再次调用 setTimeout。

使用 setInterval

function animateElement() {
    $('#element').animate({left: '+=50'}, 1000, function() {
        // 动画完成后，再次调用 animateElement
        animateElement();
    });
}

// 开始动画
animateElement();

使用 setTimeout 在回调中递归调用

function animateElement() {
    $('#element').animate({left: '+=50'}, 1000, function() {
        // 动画完成后，设置下一次动画
        setTimeout(animateElement, 1000);
    });
}

// 开始动画
animateElement();