Jquery 如何在幻灯片中禁用单击事件，直到动画完成，然后再次绑定？

我正在制作幻灯片，但我不明白如何才能解开和重新绑上我的按钮。 我想做的是设置它，这样当动画被触发时，用户在动画完成之前不能单击按钮

这是带有上一个和下一个按钮的HTML滑块：

<div id="slider-container">

    <img id="slider-background" src=" ">

    <a class="prev"> </a>
    <a class="next"> </a>

    <div class="slider">
        <img class="slide" src=" ">
    </div>

    <div class="slider">
        <img class="slide" src=" ">
    </div>

    <div class="slider">
        <img class="slide" src=" ">
    </div>

    <div class="slider">
        <img class="slide" src=" ">
    </div>

    </div>
</div>

这是加载下一个图像并设置其动画的间隔函数：

function startSlider() {

    sliderInt=0;
    sliderNext=1;
    count = $('.slider img').size();

    loop = setInterval(function(){

    if(sliderNext >= count) {
        sliderNext=0;
        sliderInt=0;
    }

    $('.slider img').eq(sliderNext-1).animate({top:"-=25px"},400)
    .animate({top:"+=475px"},900);

    $('.slider > img').eq(sliderNext)
    .delay(1000)
    .animate({top:"-=460px"},900)
    .animate({top:"+=18px"},300)
    .animate({top:"-=8px"},300);

    sliderInt = sliderNext;
    sliderNext = sliderNext+1;

    },6000)

}

将“下一步”按钮绑定到功能：

$('.next').bind('click', next);

function next() {
    newSlideNext = sliderInt+1;
    showSlideNext(newSlideNext);
}

$('.prev').bind('click', prev);

function prev() {
    newSlidePrev = sliderInt-1;
    showSlidePrev(newSlidePrev);

}

将prev按钮绑定到功能：

$('.next').bind('click', next);

function next() {
    newSlideNext = sliderInt+1;
    showSlideNext(newSlideNext);
}

$('.prev').bind('click', prev);

function prev() {
    newSlidePrev = sliderInt-1;
    showSlidePrev(newSlidePrev);

}

显示下一个图像：

function showSlideNext(idNext) {

    stopLoop();

    if(idNext >= count) {
        idNext=0;
    }

    $('.slider img').eq(idNext-1).animate({top:"-=25px"},400)
    .animate({top:"+=475px"},900);

    $('.slider > img').eq(idNext)
    .delay(1000)
    .animate({top:"-=460px"},900)
    .animate({top:"+=18px"},300)
    .animate({top:"-=8px"},300);  

    sliderInt = idNext;
    sliderNext = idNext+1;

    startSlider();

}

显示上一幅图像：

function showSlidePrev(idPrev) {

    stopLoop();

    $('.slider img').eq(idPrev+1).animate({top:"-=25px"},400)
    .animate({top:"+=475px"},900);

    $('.slider > img').eq(idPrev)
    .delay(1000)
    .animate({top:"-=460px"},900)
    .animate({top:"+=18px"},300)
    .animate({top:"-=8px"},300);

    sliderInt = idPrev;
    sliderNext = idPrev+1;

    startSlider();

}

---

你可以很容易地用旗子做这个

var animationRunning = false;

function showSlideNext(idNext) {
    if (!animationRunning) {
        animationRunning = true;
        //do what ever
        //animation done
        animationRunning = false;
    }

}

---

单击“下一步”或“上一步”将不起作用。我相信你明白了。

这是从臀部拍摄的，所以我为任何打字错误道歉（就要登机了）

不要麻烦绑定和解除绑定事件处理程序，只要创建一个布尔标志，它将指示你是否处于动画的中间：

 var isAnimating = false;

然后将其添加到事件处理程序：

function next() {
   if(!isAnimating){
       isAnimating = true;
       newSlideNext = sliderInt+1;
       showSlideNext(newSlideNext);
  }
}

这将阻止

next（）

启动另一个动画，对

prev（）

现在，您需要某种方式来指示动画已完成。最好的方法可能是在

animate（）

回调中：

 .animate({property:"value"},duration, function(){ isAnimating = false };)

---

ref：（请参阅“完整”回调）

只是为了澄清，因为我看到您从未使用过。是否要禁用单击，因为动画不断冒泡，并且您必须在结束时等待它完成？还是因为你真的需要它？根据这一点，你现在可能会得到更好的答案，用户可以点击按钮，图像会一个接一个地弹出一千次。在幻灯片中，如果按下“下一步”按钮多次，则该按钮将继续运行，直到到达相应的幻灯片。我想禁用单击事件，直到动画完成。是！它工作得很好！！需要一些改进，但我明白了。非常感谢你！