如何重置 jquery 动画以重新开始？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5069841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to reset a jquery animation to start over?
提问by Mare
I have built a nice piece of code, some animation and some click/hover events, quite a small row of them. I intend to use it on multiple html-documents (it is a game, you have to get right answer and proceed with next question), built together in another html with full-page-slider (I don't want to load DOM multiple times, makes no sense): the unsolved question is: how to reset the code without actually reloading it? how to make it to clear everything so far and start over? I am a beginner, building stuff upon others snippets. I guess it must be something so easy and basic that nobody answered it... The stuff to animate back all what is done previously is no good: too much stuff and binding and unbinding.
我已经构建了一段不错的代码，一些动画和一些点击/悬停事件，其中相当少的一行。我打算在多个 html 文档上使用它（这是一个游戏，你必须得到正确的答案并继续下一个问题），在另一个带有整页滑块的 html 中构建在一起（我不想加载多个 DOM次，没有意义）：未解决的问题是：如何在不实际重新加载代码的情况下重置代码？如何使它清除到目前为止的所有内容并重新开始？我是一个初学者，在其他片段上构建东西。我想它一定是非常简单和基本的东西，以至于没有人回答它...... 为以前所做的所有事情制作动画的东西不好：太多的东西和绑定和解除绑定。
回答by Brett
I had an animation that was keeping the position each time the code ran. To fix it I used:
我有一个动画，每次代码运行时都会保持位置。为了修复它，我使用了：
function(){ $('.target').removeAttr('style'); }
so my code was something like:
所以我的代码是这样的：
$('#target').animate({
opacity: 'toggle',
top: '+=100',
}, 1000, function() {
$('#target').removeAttr('style');
});
回答by nsordk
For jQuery you can use .finish(), and before that, to reset you need a few parameters to the .stop() method.
对于 jQuery，您可以使用 .finish()，在此之前，您需要一些参数来重置 .stop() 方法。
$(element).stop(true, true);
回答by Louis55
Try .finish().
Example (try spamming the button):
试试.finish()。
示例（尝试向按钮发送垃圾邮件）：
$('button').on('click', function(event) {
$("div").finish();
$("div").fadeOut(1000);
});
回答by Diodeus - James MacFarlane
$(element).stop(), then re-run your animation.
$(element).stop()，然后重新运行你的动画。
回答by jimmystormig
There is no easy answer since it all depends on what you've done, what state you need to reset, what UI elements need to be reset and so on. I guess you have to build your own reset method that sets all things to their initial state or... you could take the easy path and just reload the page.
没有简单的答案，因为这完全取决于您所做的事情、您需要重置的状态、需要重置的 UI 元素等等。我想您必须构建自己的重置方法，将所有内容设置为初始状态，或者……您可以采用简单的方法并重新加载页面。
回答by Mare
Thank you for patient answers. Both are right:
谢谢耐心解答。两者都对：
in case of one animation the stop method works.
in case of multiple chained animations - sorry, there is no easy way. Reload if you want a short but not so elegant solution. To do it properly - learn javascript to build the logical chain of functions. You can't run long with just jQuery.
在一个动画的情况下，停止方法有效。
在多个链接动画的情况下 - 抱歉，没有简单的方法。如果您想要一个简短但不太优雅的解决方案，请重新加载。正确地做到这一点 - 学习 javascript 来构建函数的逻辑链。你不能只用 jQuery 跑很长时间。
回答by bdurao
I do it this way: (not sure if it's entirely right, though)
我是这样做的：（不过不确定是否完全正确）
$(element).stop();
$(element).clearQueue();
$(element).delay(20).animate({ ... });
