使元素在动画时不可点击

Posted 2023-04-13

【中文标题】使元素在动画时不可点击

【英文标题】：Make an element unclickable while animated

【发布时间】：2012-05-10 02:43:09

【问题描述】：

我试图让一个元素在动画时不可点击。动画完成后，我希望它再次可点击。我已经搜索了很长时间以寻求有关如何实现此目的的帮助，但是我无法使其正常工作，也不知道为什么。

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 何时移动而不是移动。

我真的可以在这里使用一些帮助，我已经尝试了我能想到的一切。

谢谢 /奥斯卡

【参考方案1】：

您的检查仅在页面加载时运行。在 click 函数内部进行检查：

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

【参考方案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()。