我已经构建了jQuery animate image.animate 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")
    });
}

}）;

Answer 2

在你的小提琴http://jsfiddle.net/GaganJaura/y5devv2j/2/中试试这个。它的工作

$( "#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: "0px"

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

    },1500);
    }

});

Answer 3

试试这个http://jsfiddle.net/y5devv2j/4/

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

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

    });

Answer 4

您的工作jsFiddle Demo。你的动画速度很快。所以你必须增加动画的时间。

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

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

},2500);
}