Question

我希望有一个div可以将当前活动的图像设置为视图外的动画，而是在另一个图像中设置动画。这些div中有几个，每个div应具有相同的基本功能，但链接到不同的图像。我遇到的问题是你可以在动画完成之前单击许多div，这会同时触发其他动画。我的目标是一次只能触发一个动画，当动画结束时你可以触发下一个动画。我尝试过使用unbind，但是后来我不得不重新绑定它，我不知道怎么做。我真的是一个jQuery noob，所以我会大大回答一个问题。谢谢！

我的代码：

$('.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");
});

Answer 2

我认为queue（）会附加动画但不会停止它们，因此如果您在图像上单击10次，则单击处理程序会将其动画10次，但是一个接一个。我想你只想在没有图像当前动画的情况下为图像设置动画，这样你就可以使用：

$('.div1').click(function clickevent() {
    // When no image is currently animated then perform the animation
    if($j('.img1, .img2, .img3').is(':animated') == false)
    {
        $('.img2, .img3').animate({
            opacity: 0.1,
            left: 600
        }, 1000, function() {
            $('.img1').animate({
                opacity: 1,
                left: 0
            }, 500);
        });
        $(this).addClass("active");
        $('.div2, div3').removeClass("active");
   } else {
        // There is currently an animation runnig, do nothing
   }
});

有关详情，请参阅此处：http://api.jquery.com/animated-selector/

您还应该获得有关缓存选择结果的一些信息。

jQuery重新绑定功能

2 个答案: