淡出/淡入列表项 [英] Fade Out/Fade In of List Items

问题描述

这是与员工见面"页面的页面，其中存在与员工相关的小图像的垂直无序列表(#staffDirectory).当用户单击与显示的工作人员不同的工作人员时，我希望当前的大型列表项(包括该成员的图像和信息-并被分配为"staffSelected"类，并显示在div #staffMember中)，以淡出，丢掉该类，然后选择相应的listitem(用户在#staffDirectory中单击的那个)，在其中淡入，然后添加"staffSelected"类.

This is for a "Meet Our Staff" page where there is a vertical unordered list of small images associated with a staff member (#staffDirectory). When the user clicks a different staff member than the one displayed, I want the current large listitem (which includes an image and info about the member - and is assigned the class "staffSelected" and is displayed in the div #staffMember) to fadeOut, lose the class, then take the corresponding listitem (the one the user clicked in #staffDirectory), fadeIn that one, and add the "staffSelected" class.

现在发生的是有一个重叠，并且新列表项短暂地显示在旧列表项的右侧(但这仅在第二次及以后，当我单击#staffDirectory列表时才发生-第一次运行精美) .因此，过渡并不顺利.我认为这个问题必须处理我对newMember变量的声明或它在fadeIn方法中的使用.

What is happening now is that there is an overlap and the new listitem briefly displays to the right of the old one (but this only happens the second and subsequent times I click from the #staffDirectory list - the first time works beautifully). So, the transitions are not smooth. I assume this issue has to deal with my declaration of the newMember variable or its use in the fadeIn method.

JS和CSS在下面.预先感谢.

JS and CSS are below. Thanks in advance.

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(我会发布图片，但我是该网站的新手):

From Firebug (I would post an image, but I'm new to the site):

<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>

推荐答案

因此，您还需要从旧版本中删除staffSelected.我使用了ajgiv的jsfiddle并将其更改为有效:

So, you also need to remove staffSelected from the old one. I took ajgiv's jsfiddle and changed it so it worked:

jsFiddle

jsFiddle

JavaScript:

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);
    });
});

这篇关于淡出/淡入列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！