jQuery .animate() 实现无限循环动画

在 jQuery 中，.animate() 方法是一个非常强大的工具，用于创建各种动画效果。默认情况下，动画执行一次后就会停止，但是通过一些技巧，我们可以实现动画的无限循环。

使用 complete 回调实现循环

一种实现无限循环的方法是使用 .animate() 的 complete 回调。当动画完成时，complete 回调会被触发，我们可以在这里重新调用 .animate() 来开始新一轮的动画。

以下是一个简单的例子，一个元素在屏幕上来回移动：

var isMovingUp = true;
function animateElement() {
    var $element = $('#myElement');
    var height = $element.height();
    var duration = 1000; // 动画持续时间，1秒
    $element.animate({
        top: isMovingUp ? '-=' + height : '+=' + height
    }, duration, function() {
        // 动画完成时触发
        isMovingUp = !isMovingUp; // 切换方向
        animateElement(); // 重新开始动画
    });
}
animateElement(); // 开始动画

在这个例子中，isMovingUp 变量用于跟踪元素的移动方向。当元素到达屏幕底部时，isMovingUp 变为 true，元素开始向上移动；当元素到达屏幕顶部时，isMovingUp 变为 false，元素又开始向下移动。这个过程会一直重复下去，实现动画的无限循环。

使用 CSS3 动画实现循环

除了使用 jQuery 的 .animate() 方法外，我们还可以使用 CSS3 的动画来实现无限循环。这种方法通常更高效，因为动画是由浏览器直接渲染的，而不是通过 JavaScript 逐帧计算。

以下是一个使用 CSS3 实现无限循环动画的例子：

@keyframes infinite-bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0);
    }
}
#myElement {
    animation: infinite-bounce 1s infinite;
}

在这个例子中，我们定义了一个名为 infinite-bounce 的关键帧动画。这个动画会使元素在垂直方向上上下跳动。然后，我们将这个动画应用到 #myElement 元素上，并设置动画的持续时间为 1 秒，循环次数为无限次。

使用 CSS3 动画的好处是，我们可以利用浏览器的优化机制来渲染动画，而不是通过 JavaScript 逐帧计算。这通常会使动画更加流畅，性能更好。

总结

无论是使用 jQuery 的 .animate() 方法还是 CSS3 的动画，我们都可以实现无限循环的动画效果。选择哪种方法取决于具体的需求和场景。如果需要更复杂的动画逻辑或者需要更多的交互，那么使用 jQuery 可能会更加方便；如果只需要简单的动画效果，并且追求更好的性能，那么使用 CSS3 动画可能是一个更好的选择。