淡出/淡入列表项目

Question

这是用于“见我们的员工”页面，其中有一个与工作人员（#staffDirectory）关联的小图像的垂直无序列表。当用户点击不同的工作人员时，我希望当前的大型listitem（其中包含有关该成员的图像和信息 - 被分配了“staffSelected”类并显示在div #staffMember中）显示为fadeOut，失去班级，然后获取相应的listitem（用户在#staffDirectory中单击的那个），淡入其中，添加“staffSelected”类。

现在发生的事情是，有一个重叠和新的listitem简要显示在旧的右侧（但这只发生在第二次和随后的时间，我从#staffDirectory列表单击 - 第一次工作得很漂亮）。所以，过渡并不顺利。我认为这个问题必须处理我对newMember变量的声明或其在fadeIn方法中的使用。

JS和CSS都在下面。提前致谢。

JS：

$(document).ready(function() 
{ 
    $("#staffDirectory ul li").click(function() 
    { 
     var index = $("#staffDirectory ul li").index(this); 
     var newMember = null; 
     newMember = $("#staffMember ul li").get(index); 

     $(".staffSelected").fadeOut(500, function()  
     { 
      $(newMember).fadeIn(500).addClass('staffSelected'); 
     }); 

    }); 

}); 

CSS：

#staffContainer 
{ 
    margin-top: 45px; 
} 
#staffDirectory 
{ 
    margin: 25px; 
    float: left; 
} 
#staffDirectory ul 
{ 
    list-style:none; 
} 
#staffDirectory ul li 
{ 
    opacity: 0.5; 
} 

#staffDirectory img{ 
    width: 55px; 
    cursor: pointer; 
} 

#staffDirectory li:hover{ 
    opacity: 0.7; 
} 

.selectedMember { 
    opacity: 1.0 !important; 
} 

#staffMember{ 

} 

#staffMember ul{ 

list-style: none; 
} 

#staffMember li{ 
display: inline; 
} 

.staffMemberImage { 
    float: left; 
    margin-right: 30px; 
} 

.staffName { 
color: #7F0037; 
font-variant: small-caps; 
font-size: 20px; 
font-weight: bold; 
text-align: center; 
} 

.staffSelected { 
    display: inherit; 
} 

#staffMember li:not(.staffSelected) { 
    display: none; 
} 

HTML：

<div id="staffDirectory"> 
       <ul> 
        <li class="selectedMember"><img src="img/silhouette.jpg"></li> 
        <li><img src="img/silhouette.jpg"></li> 
        <li><img src="img/silhouette.jpg"></li> 
        <li><img src="img/silhouette.jpg"></li> 
        <li><img src="img/silhouette.jpg"></li>    
        <li><img src="img/silhouette.jpg"></li> 
       </ul> 
      </div> 
      <div id="staffMember"> 
       <ul> 
        <li class="staffSelected"> 
         <img src="img/silhouette.jpg" class="staffMemberImage"> 
         <p class="staffName">Jane Doe 1</p> 
         <p class="staffDesc"> 

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aliquam tincidunt mauris eu risus. 
    Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aliquam tincidunt mauris eu risus. 
    Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aliquam tincidunt mauris eu risus. 
    Vestibulum auctor dapibus neque. 
         </p> 
        </li> 

        <li> 
         <img src="img/silhouette.jpg" class="staffMemberImage"> 
         <p class="staffName">Jane Doe 2</p> 
         <p class="staffDesc"> 

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aliquam tincidunt mauris eu risus. 
    Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aliquam tincidunt mauris eu risus. 
    Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aliquam tincidunt mauris eu risus. 
    Vestibulum auctor dapibus neque. 
         </p> 
        </li> 
</ul> 

</div> 

编辑： 从萤火虫（我会张贴图片，但我是新来的网站）：

<div id="staffMember"> 
<ul> 
<li class="" style="opacity: 1; display: none;"> 
<li class="" style="display: none; opacity: 1;"> 
<li class="" style="display: none; opacity: 1;"> 
<li class="" style="display: none; opacity: 1;"> 
**<li class="staffSelected" style="display: list-item; opacity: 1;"> 
<li class="staffSelected" style="display: list-item; opacity: 1;">** 
<img class="staffMemberImage" src="img/silhouette.jpg"> 
<p class="staffName">Jane Doe</p> 
<p class="staffDesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. </p> 
</li> 
</ul> 
</div> 

Answer 1

你试过用setTimeout吗？

$(".staffSelected").fadeOut(500, function() { 
     setTimeout(function() { 
      $(newMember).fadeIn(500).addClass('staffSelected'); 
     }, 500); 
    }); 

编辑： 这是否达到你想要什么？ http://jsfiddle.net/agroth3/MC6B2/

Answer 2

因此，您还需要从旧版本中删除staffSelected。我把ajgiv是的jsfiddle和改变它，所以它的工作：

jsFiddle

的JavaScript：

$(document).ready(function() { 
    $("#staffDirectory ul li").click(function() { 
     var index = $("#staffDirectory ul li").index(this); 
     var newMember = null; 
     newMember = $("#staffMember ul li").get(index); 

     $(".staffSelected").stop().fadeOut(500).removeClass('staffSelected'); 

     setTimeout(function() { 
      $(newMember).stop().fadeIn(500).addClass('staffSelected'); 
     }, 500); 
    }); 
});