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

Question

我有一个滑块，通过在单击按钮时增大和减小边距来控制位置。如果在动画完成之前再次单击该按钮，它将从任何位置开始，从而导致定位不正确。 假设第一次单击应该将其移动100px，但是在它完成之前再次单击它（比如当它移动50px时），结果是它移动150px而不是完成100px移动然后再做另一次以达到200px。

这是我的代码;

$('#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);
});