Question

在我的代码中，我有一个按下按钮时左右移动的div。但是，当我多次按下按钮时，它会分别移动到按下的次数。我想要它做的是阻止任何输入（或按下按钮），直到动画结束。

我尝试使用延迟来阻止“排队”操作，但这只是将它们关闭了几秒钟。

这是我的代码*目前以及这个想法的jsfiddle示例：http://jsfiddle.net/Sjfuv/（是的，它们不同，示例不是我自己制作的）

jQuery(document).ready(function($) {
var clickState = 0;
var cssForState = [{
        'margin-left': '0px'
    },{
        'margin-left': '-850px'
    },{
        'margin-left': '-1700px'
    }];

var advanceToNextClickState = function() {
    clickState++;
    if (clickState >= cssForState.length)
        clickState = 0;
};

var previousClickState = function() {
    clickState--;
    if (clickState < 0)
        clickState= 2;

};
$('.RButton').click(function (e) {
    console.log("Received click while clickState = " + clickState);
    advanceToNextClickState();
    $('.slideContain').delay(150).animate(cssForState[clickState]);
});    

$('.LButton').click(function (e) {
    console.log("Received click while clickState = " + clickState);
    previousClickState();
    $('.slideContain').delay(150).animate(cssForState[clickState]);
});    
});

*对我在上一个问题上帮助过我的用户的S / O，我喜欢它的工作方式^ _ ^

Answer 1

$('.RButton').click(function (e) {
    console.log("Received click while clickState = " + clickState);

    //makes your button unclickable
    var $btn = $(this);
    $btn.attr("disabled", true);

    advanceToNextClickState();
    $('.slideContain').delay(150).animate(cssForState[clickState], function(){
        //when animation is over, make it clickable
        $btn.attr("disabled", false);
    });
});

Answer 2

使用bind和unbind方法添加您的函数。在动画解除绑定之前，动画再次绑定它。

Answer 3

使用布尔变量将代码包含在左右按钮单击函数中。

将一个函数传递给延迟函数，以便在动画结束时

将布尔值转回false。

在第一次操作完成之前阻止输入？

3 个答案: