jQuery動畫：忽略雙擊

Question

我有一個簡單的jQuery動畫，它在.click（）事件後將div移動到右側或左側。

但是，如果用戶單擊兩次該事件，它會觸發兩次，這會擾亂格式。

這裏是什麼，我有一個例子：）

$('a#right').click(function() { 

if ($(this).is(':visible')) { 

    $('#slide').animate({right: '+=257'}, 400, function() { 
    slide_button(); 
    }); 

    } 
}); 

功能slide_button（會檢查，看看是否div的位置爲用戶的角度來看可接受的範圍內。如果是這樣，它將允許右側或左側按鈕可見。如果超出限制，它將隱藏按鈕。

它的效果很好，除非我點擊了兩次 - 那麼它會立即滑過頁面。

有沒有辦法與此工作，以忽略雙擊？

Answer 1

只是檢查是否元素已經動畫：

$('a#right').click(function() { 
    if ($(this).is(':visible') && !$('#slide').is(':animated')) { 
     $('#slide').animate({right: '+=257'}, 400, function() { 
      slide_button(); 
     }); 
    } 
});  

Answer 2

你可以.unbind() click事件一次點擊，這將阻止它執行多次：

$('a#right').click(function() { 
    $(this).unbind('click'); 
    ... 
}); 

一旦動畫完成，如果你需要能夠再次點擊，你可以重新綁定。

Answer 3

我通常解決此獲得通過設置一個全局變量，如果像

clicked = true; 
$(div).click(function(){ 
    if (!clicked){ 
     clicked = true; 
     Your function with a callback setting clicked to false 
    } 
    .... 
}) 

Answer 4

運行可以在jQuery的使用one()：

$('a#right').one("click", function() { 
    slide($(this)); 
}); 

function slide(obj) { 
    if (obj.is(':visible')) { 
     $('#slide').animate({right: '+=257'}, 400, function() { 
      slide_button(); 
      $('a#right').one("click", function() { 
       slide($(this)); 
      } 
     }); 
} 

動畫完成後，click事件綁定到li再次執行，最多可以執行一次。