奇怪的影響我jquery我淡出

Question

我試圖顯示div當li被點擊並隱藏它時，其他li被點擊。問題是，當我點擊最後一個li時出現了一個奇怪的效果。

這裏是我的代碼的外觀：http://jsfiddle.net/zxGqV/4/

我在jQuery的是新的，所以我敢肯定，我的一些代碼邏輯的無厘頭。

$('.btn').click(function(c){ 
     c.preventDefault(); 
     var a = $(this).attr("id").replace('title_', ''); 
     $(this).closest("#elements").find('.btn').removeClass("current"); 
     $(this).closest('li').addClass("current"); 
     $("#elements").find('.details').fadeOut("slow", function(){ 
      $('.btn-group').find('#details_' + a).fadeIn("fast"); 
     }); 
}); 


<div class="row"> 
<div class="span8 center"> 
    <ul id="elements" class="ui-sortable"> 

    <li id="element_10" class=""> 
    <div class="btn-group"> 
     <button id="title_10" type="button" class="btn"> 
     lorem 10</button> 
     <div style="display: none;" id="details_10" class="details"> 
     lorem ipsum 10 
     </div>    
    </div> 
    </li> 

    <li id="element_11" class=""> 
     <div class="btn-group"> 
     <button id="title_11" type="button" class="btn"> 
      foo 11</button> 
     <div style="display: none;" id="details_11" class="details"> 
      foo bar 11 
     </div>    
     </div> 
    </li> 

...等

Answer 1

這個作品 - 可能要調整的時機。

在這裏我使用當前類來確保我一次只處理一個項目。

http://jsfiddle.net/cewFL/

$('.btn').click(function(c){ 
     c.preventDefault(); 
     $(this).attr("id").replace('title_', ''); 
     $(".current .details").fadeOut("fast"); 
     $(".current").removeClass("current"); 
     $(this).closest('li').addClass("current"); 
     $(".current .details").fadeIn("fast"); 

});