Question

我有一个按钮，当点击时，动画div。

我正在尝试使用$.animate() [完整]回调函数，但遇到两次快速单击按钮的情况会导致动画在第一个动画的[完成]回调运行之前运行两次。

请参阅此链接以获取演示。 http://jsfiddle.net/zs2uf/3/

如何阻止第二次点击击败第一个回调？

Answer 1

单击按钮后应立即禁用该按钮，然后执行动画。

您说要制作它以便只能单击按钮一次，但是等到动画完成后再禁用按钮。这就是程序没有按照您的意愿行事的原因，因为在动画期间，可以再次点击该按钮。

以下是如何确保按钮只能被点击一次：

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

    var pos = parseInt($("#box").css("left")),
        newPos = pos + 100;

    // disable button immediately after the click
    // if you wait to disable, you give the user the chance to click twice
    $("#next").unbind('click');
    $("#next").attr("disabled", "disabled");

    $("#box").animate({
        "left" : newPos //move the box to the right by 100px
    }, {
        duration: 150
    });        
})

Working example

在许多浏览器中可能不需要unbind()，但它确保实际上从#next中删除了click事件处理程序。

Answer 2

修正了它看看这个

http://jsfiddle.net/zs2uf/5/

<强>代码

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


    var pos = parseInt($("#box").css("left"));
    var newPos = pos + 100;

    if($("#box:animated").length == 0){

        $("#box").animate({
            "left" : newPos //move the box to the right by 100px
        }, {
            duration: 150,
            complete: function(){

            //after moving the box by 100px, disable the next button,
            //so that the box can move no further than 100px
            $("#next").attr("disabled", true);

            }
        });
    }





    //problem:
    //if you click the Next button twice really fast, 
    //the box moves twice before the button is disabled

})

第二次点击节拍首先动画完整的回调功能

2 个答案: