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

Question

我已经编写了一段不错的代码，包括一些动画和点击/悬停事件，但规模相对较小。我想在多个HTML文档中使用它（这是一个游戏，你需要得到正确答案并进入下一个问题），并将它们构建在另一个带有全屏滑块的HTML中（我不想多次加载DOM，这没有意义）：未解决的问题是：如何重置代码而不实际重新加载它？如何清除迄今为止的所有内容并重新开始？ 我是一个初学者，正在基于其他人的片段构建东西。我猜这必须是非常简单和基本的东西，没有人回答它......将所有以前完成的工作返回的东西都进行动画处理不好：太多的东西需要绑定和解除绑定。

- Mare

Answer 1

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

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

所以我的代码大致如下：

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

- Brett

Answer 2

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

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

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

- nsordk

---

这个不起作用，它只是把转换后的元素留在那里... :-/ - genuinefafa

Answer 3

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

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

- bdurao

Answer 4

感谢您的耐心回答。两者都是正确的：

• 在一个动画的情况下，停止方法有效。

• 在多个链接动画的情况下 - 抱歉，没有简单的方法。如果您想要一个简短但不太优雅的解决方案，请重新加载。要正确地完成此操作 - 学习JavaScript以构建函数的逻辑链。仅使用jQuery无法长期运行。

- Mare

Answer 5

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

- Diodeus - James MacFarlane

---

这个不起作用。一旦完成，它将不会重新运行或重新开始。 - John

Answer 6

这个问题并没有简单的答案，因为它取决于你所做的事情、需要重置的状态、需要重置的UI元素等等。我猜你得构建自己的重置方法，将所有东西都设置为初始状态，或者...你可以选择走捷径，只需重新加载页面。

- jimmystormig

Answer 7

尝试使用.finish()方法。
示例（尝试连续点击按钮）：

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

- Louis55