javascript - jQuery 重新绑定(bind)函数

Question

我想要一个 div，它使当前事件的图像在 View 外动画化，而不是在另一个图像中动画化。这些 div 有好几个，每个 div 都应该具有相同的基本功能，但链接到不同的图像。我遇到的问题是您可以在动画完成之前单击许多 div，这会同时触发其他动画。我的目标是一次只能触发一个动画，当动画结束时你可以触发下一个动画。我试过使用 unbind ，它工作正常，但后来我不得不重新绑定(bind)它，我不知道该怎么做。我真的是一个 jQuery 菜鸟，所以我会非常感谢你的回答。谢谢!

我的代码:

$('.div1').click(function clickevent() {
    $('.img2, .img3').animate({
        opacity: 0.1,
        left: 600
    }, 1000, function() {
        $('.img1').animate({
            opacity: 1,
            left: 0
        }, 500, function() {
            $('.div2, .div3').bind('click', clickevent); /* Here I want to rebind the function */
        });
    });
    $(this).addClass("active");
    $('.div2, div3').removeClass("active");
    $('div2, .div3').unbind('click', clickevent);
});

我还有另外两个 .div2 和 .div3 的代码块，它们看起来相同，但在不同的地方有不同的类。有没有办法让图像在能够再次制作动画之前完成动画？谢谢。

Answer 1

这是你需要的吗:

var canAnimate = true;
$('.div1').click(function clickevent() {
    // these 4 lines have to be in all code blocks (ie. for .div2 and .div3)
    if (! canAnimate) {
        return;
    }
    canAnimate = false;

    $('.img2, .img3').animate({
        opacity: 0.1,
        left: 600
    }, 1000, function() {
        $('.img1').animate({
            opacity: 1,
            left: 0
        }, 500, function() {
            canAnimate = true; // this should also be included for .div2 and .div3 code blocks
        });
    });
    $(this).addClass("active");
    $('.div2, div3').removeClass("active");
});