石家庄人才网今天给大家分享《jquery Animate怎么做循环动画》，石家庄人才网小编对内容进行了深度展开编辑，希望通过本文能为您带来解惑。

在使用 jQuery 的 animate() 方法创建动画时，如果想要让动画循环播放，可以使用 JavaScript 的 setInterval() 方法或 jQuery 的 queue() 方法。

1. 使用 setInterval() 方法

setInterval() 方法可以按照指定的周期（以毫秒计）来重复调用函数或计算表达式。我们可以使用该方法来创建一个定时器，每隔一段时间就执行一次 animate() 方法，从而实现动画的循环播放。

例如，下面的代码可以让一个元素在 2 秒内从左向右移动 100 像素，并无限循环播放该动画：

```javascriptvar $element = $('#my-element');setInterval(function() { $element.animate({ left: '+=100px' }, 2000, function() { $element.css('left', '0'); // 动画结束后将元素重置到初始位置 });}, 2000);```

在上面的代码中，我们首先使用 jQuery 选择器获取到要进行动画的元素，并将其存储在 $element 变量中。然后，我们使用 setInterval() 方法创建一个定时器，该定时器每隔 2000 毫秒（即 2 秒）就会执行一次回调函数。

在回调函数中，我们首先使用 animate() 方法让元素在 2 秒内从左向右移动 100 像素。animate() 方法的第一个参数是一个包含动画属性和目标值的 JavaScript 对象，第二个参数是动画的持续时间（以毫秒计），第三个参数是一个可选的回调函数，该函数会在动画结束后被调用。

在 animate() 方法的回调函数中，我们使用 css() 方法将元素的 left 属性重置为 0，以便在下一次动画开始时，元素能够从初始位置开始移动。

2. 使用 queue() 方法

jQuery 的 queue() 方法可以将函数添加到动画队列中。当动画队列为空时，队列中的第一个函数会被执行。当第一个函数执行完毕

例如，下面的代码可以让一个元素在 2 秒内从左向右移动 100 像素，并无限循环播放该动画：

```javascriptvar $element = $('#my-element');function animateElement() { $element.animate({ left: '+=100px' }, 2000, function() { $element.css('left', '0'); // 动画结束后将元素重置到初始位置 animateElement(); // 将动画函数再次添加到队列中 });}animateElement(); // 第一次调用动画函数```

在上面的代码中，我们首先定义了一个名为 animateElement() 的函数，该函数用于执行动画。在函数内部，我们使用 animate() 方法让元素在 2 秒内从左向右移动 100 像素。在 animate() 方法的回调函数中，我们使用 css() 方法将元素的 left 属性重置为 0，并将 animateElement() 函数再次添加到动画队列中，从而实现动画的循环播放。石家庄人才网小编最后，我们调用 animateElement() 函数来启动动画。

有关《jquery Animate怎么做循环动画》的内容介绍到这里，想要了解更多相关内容记得收藏关注本站。