Question

我希望在允许点击下一个按钮之前运行动画，这样动画就不会失去同步。我不知道什么是更好的绑定/解除绑定或类似的东西不是真正的循环。

function first_horizontal_slider() {
var $scroller = $('div#first_slider');
var counter = 0;



$('div#first_left_btn a').css({'background': 'url(img/left_arrow_bw.png) no-repeat'});
$('div#first_right_btn a').css({'background': 'url(img/right_arrow.png) no-repeat'});

$('div#first_left_btn a').click(function() {    

    if (counter != 0)
    {   
        $('div#first_right_btn a').css({'background': 'url(img/right_arrow.png) no-repeat'});

        $scroller.stop().animate({
            "left":"+=732px"
        },"slow");
        counter--;

        if (counter == 0)
        {
            $('div#first_left_btn a').css({'background': 'url(img/left_arrow_bw.png) no-repeat'});
        }       
    }
    return false;
});

$('div#first_right_btn a').click(function() {

    if (counter != 2)
    {
        $('div#first_left_btn a').css({'background': 'url(img/left_arrow.png) no-repeat'});

        $scroller.stop().animate({
            "left":"-=732px"
        },"slow");
        counter++;  

        if (counter == 2)
        {
            $('div#first_right_btn a').css({'background': 'url(img/right_arrow_bw.png) no-repeat'});
        }
    }
    return false;
});

}

Answer 1

如果您使用了button或input type="button"，那么您可以在动画之前将.disabled设置为true，之后又返回false。

Answer 2

在animate的回调函数上，您可以将按钮设置为启用。

Answer 3

您可以在动画开始时禁用该按钮，并在动画的complete方法中进行回调以启用按钮

 //before animation starts
disableButton()

$scroller.stop().animate({
            "left":"+=732px"
        },"slow", 'swing', enableButton); //added default easing

function enableButton() {
   $('#thebutton').removeAttr('disabled');
}

function disableButton() {
   $('#thebutton').attr('disabled', 'disabled');
}

Answer 4

使用jQuery end或通过jQuery animated

查看

禁用单击直到动画结束

4 个答案: