0

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

2 回答 2

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);
    });
});
于 2013-05-09T16:21:36.097 回答
0

您是否尝试过使用 setTimeout？

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

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

于 2013-05-09T14:05:56.130 回答