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

Question

我该如何在 jQuery 中重置动画？例如：

CSS

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

JS：

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

如果我执行：

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

动画将会停止。但是我该如何清除位置，从0,0点开始重新开始呢？

- Fede

---

快速想法：停止后立即设置元素的CSS。 - Stachu

Answer 1

当 jQuery 对一个元素进行动画效果时，它会将相关样式信息添加到 style 属性中。如果您需要在不使用 jQuery css 的情况下将元素重置为其基本样式，请在动画结束时删除此属性 - 参见 jQuery API 上的 .animate()。

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

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

- Kami

Answer 2

您可以像之前所做的那样使用.stop()，但需要向其添加一个参数来清除队列，然后使用.css()重置您的上部和左���位置：

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

---

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

- jfriend00

Answer 3

你正在寻找 jQuery 中的 .finish。

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

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

- JF it

---

这会重置元素的原始位置吗？ - Brett Weber

Answer 4

重置动画

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

- ayed abboushi