如何重启/重置Jquery动画

Question

如何在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的情况下将元素重置为其基本样式，只需在动画结束时删除此属性 - 请参阅.animate() on jQuery API。

$('.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()一样使用.css()，但要为其添加一个参数以清除队列，然后使用$('.block').stop(true).css({top: 0, left: 0}); 重置您的左上角和左侧位置：

.finish()

---

{{1}}也属于同一类别，但这会将所有动画置于最终状态，这不是您想要在此处执行的操作。您只想停止/清除当前动画（包括任何排队的动画），然后将CSS属性重置回起始状态。

Answer 4

重置动画

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