jQuery的 - 上的元素，當點擊太快動畫拿到車

Question

我一直對這個jQuery效果繼承人的小提琴： http://jsfiddle.net/abtPH/26/

一切都還不錯，到目前爲止，但是當我點擊元素太快它似乎得到越野車，並得到奇怪的行爲。如果你花時間點擊它能正常工作的元素。

我使用:animate

的東西，以確保動畫結束之前，用戶可以點擊下一個嘗試。我不喜歡這種方法，因爲從最終用戶來看，效果似乎很差。我希望用戶能夠快速點擊元素並獲得理想的效果。

這裏是我的jQuery至今：

$('li').on('click', function (e) { 
    e.preventDefault(); 
    var active = $(this).siblings('.active'); 
    var posTop = ($(this).position()).top; 
    if (active.length > 0) { 
     var activeTop = (active.position()).top; 
     if (activeTop == posTop) { 
      $(this).find('.outer').fadeIn('medium', function() { 
       active.toggleClass('active', 400).find('.outer').fadeOut('medium'); 
      }); 

     } else { 
      $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle(); 
      $(this).find('.outer').slideToggle(); 
     } 
    } else { 
     $(this).find('.outer').slideToggle(); 
    } 
    $(this).toggleClass('active', 400); 
}); 
$('.outer').on('click', function (e) { 
    return false; 
}); 

Answer 1

使用開始一個新的

$('li').on('click', function(e){ 
    e.preventDefault(); 
    var active = $(this).siblings('.active'); 
    var posTop = ($(this).position()).top; 
    if (active.length > 0) { 
     var activeTop = (active.position()).top; 
     if (activeTop == posTop) { 
      $(this).find('.outer').finish().fadeIn('medium', function(){ 
       active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium'); 
      }); 

     } else { 
      $(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle(); 
      $(this).find('.outer').finish().slideToggle(); 
     } 
    } else { 
     $(this).find('.outer').finish().slideToggle(); 
    } 
    $(this).finish().toggleClass('active', 400); 
}); 
$('.outer').on('click', function(e){ 
    return false; 
}); 

演示之前.finish()完成所有排隊的動畫：Fiddle