Question

我正在尝试使元素在动画时不可点击。动画完成后，我希望它再次可以点击。我已经搜索了很长时间以获得有关如何实现这一目标的一些帮助，但我无法让它工作，我不知道为什么。

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

最后一部分根本不起作用，即使我插入一个简单的alert（）而不是unbind（）它似乎也没有弄清楚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.
        });
    }
});

此外，不推荐使用live（）;考虑转到on（）。

Answer 2

只需一个带内部分支的点击处理程序，以满足不同的情况，这是更经济的;正在进行动画，反向动画以及在动画进行过程中拒绝。

通过测试llright的状态，您也可以在没有addClass / removeClass（'open'）的情况下离开。

这样的事情应该这样做：

$('#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()。

在动画时使元素不可点击

2 个答案: