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