Fade Out/Fade In of List Items

问题

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.

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

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

回答1:

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

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

回答2:

have you tried using setTimeout?

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

Edit: does this achieve what you want? http://jsfiddle.net/agroth3/MC6B2/

来源：https://stackoverflow.com/questions/16463560/fade-out-fade-in-of-list-items

标签

jquery

fadein

fadeout

unordered