jQuery的動畫跳過

Question

如果您了div點擊頂部的速度不夠快，請看一看this jsfiddle

，你會發現，最終兩個div最終呈現。我之前也有過jQuery的這個問題。我剛剛結束了在這種情況下禁用按鈕（或動畫觸發器），但我想知道是否有一個更優雅的解決方案。

這裏是我的jQuery代碼 -

 $(function() { 
      var _animDuration = 400; 
      $("#tabLists a").click(function() { 
       var attrHref = $(this).attr('href'); 
       // Get shown anchor and remove that class - 
       $('.shownAnchor').removeClass('shownAnchor'); 
       $(this).addClass('shownAnchor'); 
       // first hide currently shown div, 
       $('.shownDiv').fadeOut(_animDuration, function() { 
        debugger; 
        // then remove the shownDiv class, show the clicked div. 
        $(this).removeClass('shownDiv'); 
        $('#' + attrHref).fadeIn(_animDuration, function() { 
         // then add that shownDiv class to the div currently being shown. 
         $(this).addClass('shownDiv'); 
        }) 
       }); 
       return false; 
      }); 
     }); 

我使用回調無處不在。我想一個解決方案，將排隊的動畫，而不是，不是讓我點擊

Answer 1

試試這個代碼用支票VAR：

$(function(){ 
       var check = 1; 
       var _animDuration = 400; 
       $("#tabLists a").click(function(){ 
        if(check == 1){ 
         check = 0; 
         var attrHref = $(this).attr('href');      
         // Get shown anchor and remove that class - 
         $('.shownAnchor').removeClass('shownAnchor'); 
         $(this).addClass('shownAnchor'); 
         // first hide currently shown div, 
         $('.shownDiv').fadeOut(_animDuration, function(){ 
          debugger; 
          // then remove the shownDiv class, show the clicked div. 
          $(this).removeClass('shownDiv'); 
          $('#' + attrHref).fadeIn(_animDuration, function(){ 
           // then add that shownDiv class to the div currently being shown. 
           $(this).addClass('shownDiv'); 
           check = 1; 
          }) 
         }); 
        } 
        return false; 
       }); 
      }); 

DEMO