jquery - 如何禁用点击事件直到动画完成？

Question

我想禁用“点击”事件，直到动画完成。

标记

<ul>
    <li data-name="item1" class="nav">Item 1</li>
    <li data-name="item2" class="nav">Item 2</li>
</ul>

这是我的 jQuery 代码

$('.nav').live('click', function(){
     $('.nav').unbind('click');

     var itemId = $(this).data('name');

     if( itemId === 'item1') {
         $('#item1').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    } else if( itemId === 'item2') {
         $('#item2').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    }
});

上面的代码似乎不起作用。我如何解决它？[如果我在“项目 1”的动画完成之前单击“项目 2”，“项目 2”也会开始动画。我希望一次只能制作一个动画]

Answer 1

你可以试试这个:

$(".nav").click(function(){
  if ($('#item').is(':animated'))
  {
      return false;
  }
  ...
});