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

Question

我已经构建了一段不错的代码，一些动画和一些单击/悬停事件，其中只有一小行。我打算在多个 html 文档上使用它（这是一个游戏，你必须得到正确的答案并继续下一个问题），用全页滑块构建在另一个 html 中（我不想加载 DOM 多个次，毫无意义）：未解决的问题是：如何重置代码而不实际重新加载它？如何让它清除迄今为止的一切并重新开始？ 我是一个初学者，在其他片段上构建东西。我想这一定是一些非常简单和基本的事情，以至于没有人回答它......用动画来恢复之前所做的所有事情是不好的：太多的东西以及绑定和解除绑定。

Answer 1

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

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

所以我的代码是这样的：

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

谢谢各位耐心解答。两者都是正确的：

• 如果是一个动画，则 stop 方法有效。

• 如果有多个链接动画 - 抱歉，没有简单的方法。如果您想要一个简短但不那么优雅的解决方案，请重新加载。要正确地做到这一点 - 学习 javascript 来构建函数的逻辑链。仅使用 jQuery 无法长时间运行。

Answer 7

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

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