使一个元素无法点击，而动画 [英] Make an element unclickable while animated

问题描述

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

I am trying to make an element not clickable when it is animated. When the animation is done I want it to be clickable again. I have searched a long time for some help on how to achieve this, but I can't get it to work and I don't know why.

中的HTML：

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

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

When letter A is clicked, it moves to the left and then some text fades in next to it.

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');
    });

});


})();

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

The animation works great, but this doesn't:

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

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

The last part doesn't work at all, even when I insert a simple alert() instead of unbind() it doesn't seem to figure out when A is moving and not.

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

I could really use some help here, I have tried everything I can think of.

THX
/奥斯卡

Thx /Oscar

推荐答案

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

Your check is only running on page load. Do the check inside of the click function:

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

此外，生活（）是德precated;考虑迁移到在（）。

Also, live() is deprecated; consider moving to on().

这篇关于使一个元素无法点击，而动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！