如何重启/重置Jquery动画

如何在jquery中重置动画？ 例如：

CSS

.block { position:absolute; top: 0; left: 0; } 

JS：

 $('.block').animate({ left: 50, top: 50 }); 

如果我做 ：

 $('.block').stop(); 

动画将停止。 但是我怎样才能清除这个位置，重新开始呢？ 从点0,0。

Answer 1

当jQuery为元素设置动画时，它会在style属性中添加与样式相关的信息。 如果你需要在没有jQuery css的情况下将元素重置为它的基本样式，只需在动画结束时删除此属性 – 请参阅jQuery API上的.animate（） 。

 $('.block').animate({ left: 50, top: 50 }, 'slow', function () { $(this).removeAttr('style'); }); 

回调函数将删除style属性并在动画结束时重置元素。

Answer 2

你正在寻找jquery .finish

http://api.jquery.com/finish/

 $('.block').finish().css('top', '0').css('left', '0'); 

Answer 3

您可以像使用.stop()一样使用.stop() ，但是为它添加一个参数以清除队列，然后使用.css()重置您的顶部和左侧位置：

 $('.block').stop(true).css({top: 0, left: 0}); 

---

.finish()也属于同一类别，但是它将所有动画置于最终状态，这不是你想要做的事情。 您只想停止/清除当前动画（包括任何排队的动画），然后将CSS属性重置回起始状态。

Answer 4

重置动画

 $('.block').removeAttr('style'); // $('.block').animate({ left: 50, top: 50 });