做一个元素无法点击，而动画(Make an element unclickable while an

我试图让一个元素不点击，当它被动画。当动画完成我想让它再点击。我寻觅了很长一段时间就如何实现这一目标一定帮助，但我不能让它的工作，我不知道为什么。

该HTML：

<p>
   <span class="red" id="a">A</span><span id="llright" class="hide">llright</span> B C D
</p>

当点击字母A，它移动到左侧，然后一些文本旁边变淡。

jQuery的：

(function() {

var letterA = $('#a'),
    llright = $('#llright');


$('#a:not(.open)').live('click', function() {
    letterA.animate({
    marginRight: "5.7in",
    }, 1300, function() {
        letterA.addClass('open');
        llright.fadeIn(1300); // Animation complete.
    });

});


$('#a.open').live('click', function() {
    llright.fadeOut(700);
    letterA.delay(700).animate({
    marginRight: "0.0in",
    }, 700, function() {
        letterA.removeClass('open');
    });

});


})();

动画的伟大工程，但这并不：

if(letterA.is(':animated')) {
    letterA.unbind('click');
};

最后一部分并不在所有的工作，甚至当我插入的，而不是一个简单的警报（）解除绑定（）它似乎并没有搞清楚当A移动，而不是。

我真的可以使用一些帮助在这里，我已经试过所有我能想到的。

THX /奥斯卡

Answer 1:

你的检查仅在页面加载运行。执行点击功能内的检查：

$('#a:not(.open)').live('click', function() {
    if(!letterA.is(':animated')) {
        letterA.animate({
        marginRight: "5.7in",
        }, 1300, function() {
            letterA.addClass('open');
            llright.fadeIn(1300); // Animation complete.
        });
    }
});

另外，生活（）的支持; 考虑迁移到在（）。

Answer 2:

这是更经济的附加一个单击处理程序内部的分支，以应付不同的情况; 向前动画，反向动画和拒绝而动画正在进行中。

您也可以通过测试的状态，摆脱不addClass / removeClass（“公开”） llright代替。

像这样的东西应该这样做：

$('#a').on('click', function() {
    var $this = $(this),
        llright = $this.next("span");
    if($this.is(":animated") || llright.is(":animated")) {
        return;//reject (no action)
    }
    if(llright.is(":visible")) { //reverse animation sequence
        llright.fadeOut(700, function(){
            $this.animate({
                marginRight: 0,
            }, 700);
        });
    }
    else {
        $this.animate({ //forward animation sequence
            marginRight: "5.7in",
        }, 1300, function() {
            llright.fadeIn(1300);
        });
    }
});

还需要注意的是这个代码是没有必要使用.live()

文章来源: Make an element unclickable while animated