如何重新启动/重置Jquery动画

Question

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

CSS

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

联署材料：

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

如果我这样做了：

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

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

Answer 1

当jQuery动画一个元素时，它会在style属性中添加与样式相关的信息。如果您需要在没有jQuery css的情况下将元素重置为它的基本样式，只需在动画末尾删除这个属性-请参阅.animate()在jQuery API上。

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

回调函数将删除style属性，并在动画末尾重置元素。

Answer 2

您可以像您正在做的那样使用.stop()，但是在其中添加一个参数也可以清除队列，然后使用.css()重置您的顶部和左侧位置。

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

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

Answer 3

您正在寻找jquery .finish

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

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