列表项的淡出/淡入

Question

这是一个“认识我们的员工”页面，其中包含与员工相关的小图像的垂直无序列表 (#staffDirectory)。当用户单击与显示的工作人员不同的工作人员时，我希望当前的大型列表项（其中包括有关成员的图像和信息 - 并被分配类“staffSelected”并显示在 div #staffMember 中）淡出，丢失类，然后获取相应的列表项（用户在#staffDirectory 中单击的那个），fadeIn 那个，并添加“staffSelected”类。

现在发生的情况是有重叠，新列表项会短暂显示在旧列表项的右侧（但这只会发生在我第二次和随后从#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>

编辑： 来自 Firebug（我会发布一张图片，但我是该网站的新手）：

<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

因此，您还需要从旧的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);
    });
});

Answer 2

您是否尝试过使用 setTimeout？

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

编辑： 这能达到你想要的吗？ http://jsfiddle.net/agroth3/MC6B2/