奇怪的影响我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"); 

});