如何在動畫完成之前禁用點擊事件？

Question

我想在動畫完成之前禁用'click'事件。

標記

<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

使用.bind，因爲.live（）綁定到文檔。

$('.nav').bind('click', function(el, ev) { 
    clickme($(this), ev) 
}); 


function clickme(obj, ev) { 
    obj.unbind(ev); 
    console.log(obj.css('margin-left')); 
    var dest = 0; 
    if (obj.css('margin-left') == '0px') { 
     dest = '300'; 
    } 
    obj.animate({ 
     'margin-left': dest 
    }, 3000, function() { 
     obj.click(function() { 
      clickme(obj) 
     }) 

workig樣本：http://jsfiddle.net/oceog/CzkBu/

Answer 2

您可以使用動畫：動畫選擇要檢查的元素之一是animeted：

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

    var itemId = $(this).data('name'); 
    var animated = $('.nav:animated').length; 
    if(itemId === 'item1' && animated === 0) { 
     $('#item1').animate({ 
      'left' : '300' 
     }, 300, function(){ 
      $('.nav').bind('click'); 
     }); 
    } else if(itemId === 'item2' && animated === 0) { 
     $('#item2').animate({ 
      'left' : '300' 
     }, 300, function(){ 
      $('.nav').bind('click'); 
     }); 
    } 
}); 

Answer 3

，你可以一個布爾值設置爲false時，動畫正在播放，並在動畫完成時將其設置爲true。在點擊處理程序中，如果布爾值爲true，請執行您想要在點擊上執行的操作。

Answer 4

這是我對我所需要的項目的一個代碼。點是在開始時做一些變量，將它設置爲讓1表示，然後點擊ü檢查var是否爲1，如果是，則繼續動畫，然後在下一行中將變量設置爲0或除1之外的其他任何值，並在動畫結束後再次在回調函數中將其設置爲1。我需要淡入/淡出。無論如何，這是非常簡單的方法。下面是代碼：

var available = 1; 
    $('a.contact').click(function(){ 
     console.log(available); 
     if(available == 1) { 
      available = 0; 
      $('.red-arrow').fadeIn('slow', function(){ 
      $(this).delay(2800).fadeOut('slow', function(){ 
       available = 1; 
      }); 

     }); 
     } 

    }) 

Answer 5

你可以試試這個：

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