jquery - 我已经构建了 jQuery 动画图像。动画 jQuery 在第二次点击时不起作用

Question

$( "#btn1" ).click(function() {

   var $this = $(this);
   var clickCount = ($this.data("click-count") || 0) + 1;
   $this.data("click-count", clickCount);

    if (clickCount%2 == 0) {
        $("#img1").hide('clip').animate({
            marginLeft: "40%"

        },1500);
    } else {
        $("#img1").show('clip').animate({
            marginLeft: "40%"
        },1500);
    }

});

问题是当我隐藏图像然后第三次单击按钮时 j 查询动画第一次正常工作我想要与第一次相同的动画但是它更快并且不能正常工作。

working example

Answer 1

Demo

动画结束前点击按钮导致的速度问题。您可以通过单击按钮时禁用按钮来防止它，然后在动画完成后重新启用它。此外，如果在每个动画完成后重置样式会更好。您可以查看下面的代码。

$("#btn1").click(function() {
var button = $(this);
button.attr("disabled", true);
var $this = $(this);
var clickCount = ($this.data("click-count") || 0) + 1;
$this.data("click-count", clickCount);

if (clickCount % 2 == 0) {
    $("#img1").hide('clip').animate({
        marginLeft: "40%"

    }, 1500).promise().then(function() {
        button.removeAttr("disabled");
    });
} else {
    $("#img1").removeAttr('style');
    $("#img1").show('clip').animate({
        marginLeft: "40%"

    }, 1500).promise().then(function() {
        button.removeAttr("disabled")
    });
}

});