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

【问题标题】：How to restart/reset Jquery animation如何重新启动/重置 Jquery 动画
【发布时间】：2016-09-08 01:43:59
【问题描述】：

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

CSS

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

JS：

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

如果我这样做：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你正在寻找 jquery .finish

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

【讨论】：

【解决方案4】：

重置动画

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

【讨论】：