Fade Out/Fade In of List Элементы

Question

Это страница «Знакомьтесь с нашим персоналом», где есть вертикальный неупорядоченный список небольших изображений, связанных с сотрудником (#staffDirectory). Когда пользователь нажимает на другой сотрудник, чем тот, который отображается, мне нужен текущий большой список (который включает в себя изображение и информацию о члене), и ему присваивается класс «staffSelected» и отображается в div #staffMember) для fadeOut, потерять класс, затем взять соответствующий listitem (тот, который пользователь нажал в #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> 

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

Вы пробовали использовать setTimeout?

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

Edit: ли это добиться того, чего вы хотите? 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); 
    }); 
});