jquery - Fade Out/Fade In of List Items -

this "meet our staff" page there vertical unordered list of small images associated staff member (#staffdirectory). when user clicks different staff member 1 displayed, want current large listitem (which includes image , info member - , assigned class "staffselected" , displayed in div #staffmember) fadeout, lose class, take corresponding listitem (the 1 user clicked in #staffdirectory), fadein one, , add "staffselected" class.

what happening there overlap , new listitem briefly displays right of old 1 (but happens second , subsequent times click #staffdirectory list - first time works beautifully). so, transitions not smooth. assume issue has deal declaration of newmember variable or use in fadein method.

js , css below. 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: firebug (i post image, i'm new 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> 

so, need remove staffselected old one. took ajgiv's jsfiddle , changed 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);     }); });