jquery - 在再次运行之前强制 onClick 动画完全完成

Question

我有一个滑块，它通过在单击按钮时增加和减少边距来控制位置。如果在动画完成之前再次单击该按钮，它将从原来的位置开始，从而导致定位不正确。假设第一次单击应该将其移动 100 像素，但您在完成之前再次单击它（例如当它移动 50 像素时），结果是它移动了 150 像素，而不是完成 100 像素的移动然后再进行一次以达到 200 像素。

这是我的代码；

$('#button').click(function (e) {
    e.preventDefault();
    $('#toMove').animate({
        marginTop: topMargin
    }, 1000);
});

TopMargin 在代码中设置为更高的 var。

我遇到过 stop() 和 queue() 但我不确定我是否正确使用它们，因为我无法让它们工作。

Answer 1

$('#button').click(function (e) {
e.preventDefault();
 $('#toMove').animate({
    marginTop: topMargin,
    complete: function() {
                $(this).css('margin-top','0px');
           }
 }, 1000);
});