如何重置 jquery 动画以重新开始？答案

【问题标题】：how to reset a jquery animation to start over?如何重置 jquery 动画以重新开始？
【发布时间】：2011-07-01 11:43:17
【问题描述】：

我已经构建了一段不错的代码，一些动画和一些点击/悬停事件，其中的一小行。我打算在多个 html-documents 上使用它（这是一个游戏，你必须得到正确的答案并继续下一个问题），在另一个带有 full-page-slider 的 html 中构建在一起（我不想加载 DOM 多个次，毫无意义）：未解决的问题是：如何在不实际重新加载代码的情况下重置代码？如何使它清除到目前为止的所有内容并重新开始？我是一个初学者，在其他人的 sn-ps 上构建东西。我想它一定是一些如此简单和基本的东西，以至于没有人回答它......将以前所做的一切动画化的东西是不好的：太多的东西和绑定和解除绑定。

【问题讨论】：

标签： jquery methods reset

【解决方案1】：

我有一个动画，每次代码运行时都会保持位置。为了修复它，我使用了：

function(){ $('.target').removeAttr('style'); }

所以我的代码是这样的：

$('#target').animate({
  opacity: 'toggle',
  top: '+=100',
  }, 1000, function() {
  $('#target').removeAttr('style'); 
});

【讨论】：

【解决方案2】：

对于 jQuery，您可以使用 .finish()，在此之前，您需要为 .stop() 方法设置一些参数。

$(element).stop(true, true);

https://api.jquery.com/stop/

【讨论】：

这不起作用，它只是将转换后的元素留在那里......：-/

【解决方案3】：

$(element).stop()，然后重新运行你的动画。

【讨论】：

这不起作用。完成后不会重新运行或重新开始。

【解决方案4】：

没有简单的答案，因为这完全取决于您做了什么、需要重置什么状态、需要重置哪些 UI 元素等等。我想您必须构建自己的重置方法，将所有内容设置为初始状态，或者......您可以采用简单的方法并重新加载页面。

【讨论】：

【解决方案5】：

感谢您耐心的回答。两个都对：

在一个动画的情况下，停止方法有效。
如果有多个链接动画 - 抱歉，没有简单的方法。如果您想要一个简短但不那么优雅的解决方案，请重新加载。正确地做到这一点 - 学习 javascript 来构建函数的逻辑链。你不能只用 jQuery 跑很长时间。

【讨论】：

【解决方案6】：

我是这样做的：（但不确定是否完全正确）

$(element).stop();
$(element).clearQueue();
$(element).delay(20).animate({ ... });

【讨论】：

【解决方案7】：

试试.finish()。
示例（尝试向按钮发送垃圾邮件）：

$('button').on('click', function(event) {
  $("div").finish();
  $("div").fadeOut(1000);
});

【讨论】：