javascript - Dividers fade in and out -

i have menu of 7 elements. whenever element clicked, content appears fading in. if element clicked, current content fade out , new content fade in. applied concept 3 of 7 elements in menu, i'm facing 2 problems: 1) isn't fading in 2) there's timing problem in fading in , out, content might collide another. help?

html:

<div id="menu" class="menu">         <ul class="headlines">              <li id="item1"onclick="checklist(this)"><button >a</button></li>             <li id="item2"><button >b</button></li>             <li id="item3"><button >c        </button></li>             <li id="item4"><button>d         </button></li>             <li id="item5"><button>e   </button></li>             <li id="item6"><button>f       </button></li>             <li id="item7"><button>g       </button></li> <!--                  <li> <input type="button" value="animation" onclick="checklist(this)"> </input>   </li>-->         </ul>         </div>           <div id="first"> <img id="image1" src="http://placehold.it/350x150"/> <img id="image2" src="http://placehold.it/350x150"/> <img id="image3" src="http://placehold.it/350x150"/> <img id="image4" src="http://placehold.it/350x150"/> <img id="image5" src="http://placehold.it/350x150"/> <img id="image6" src="http://placehold.it/350x150"/> <img id="image7" src="http://placehold.it/350x150"/> <img id="image8" src="http://placehold.it/350x150"/> <img id="image9" src="http://placehold.it/350x150"/> <img id="image10"src="http://placehold.it/350x150"/> </div>           <div id="second">         <img id="image1" src="http://placehold.it/350x150"/> <img id="image2" src="http://placehold.it/350x150"/> <img id="image3" src="http://placehold.it/350x150"/> <img id="image4" src="http://placehold.it/350x150"/> <img id="image5" src="http://placehold.it/350x150"/> <img id="image6" src="http://placehold.it/350x150"/> <img id="image7" src="http://placehold.it/350x150"/> <img id="image8" src="http://placehold.it/350x150"/> <img id="image9" src="http://placehold.it/350x150"/> <img id="image10"src="http://placehold.it/350x150"/>     </div>          <div id="third">         <img id="image1" src="http://placehold.it/350x150"/> <img id="image2" src="http://placehold.it/350x150"/> <img id="image3" src="http://placehold.it/350x150"/> <img id="image4" src="http://placehold.it/350x150"/> <img id="image5" src="http://placehold.it/350x150"/> <img id="image6" src="http://placehold.it/350x150"/> <img id="image7" src="http://placehold.it/350x150"/> <img id="image8" src="http://placehold.it/350x150"/> <img id="image9" src="http://placehold.it/350x150"/> <img id="image10"src="http://placehold.it/350x150"/> </div> 

css:

#first {     display: none;     width: 50%;     height: 220px;     margin:auto;     padding-left: 150px;     margin-top: -215px;  } #first img  {     height: 100px;     width: 100px;     float:left;     margin-right: 5%;     cursor: pointer; }  #second {     display: none;     width: 50%;     height: 220px;     margin:auto;     padding-left: 150px;     margin-top: -215px;  } #second img  {     height: 100px;     width: 100px;     float:left;     margin-right: 5%;     cursor: pointer; }  #third {     display: none;     width: 50%;     height: 220px;     margin:auto;     padding-left: 150px;     margin-top: -215px;  } #third img  {     height: 100px;     width: 100px;     float:left;     margin-right: 5%;     cursor: pointer; }   li{     list-style-type: none;     font-size: 1.5em;     height: 40px;     width: 180px;     text-align:right;         border-style: none;  }  .menu{      width:150px;     height: 350px;     }  .menu li{   position: relative;   top:150px;    bottom: 0;   left: 695px;   right:0;   margin: auto;    border-style:none;  } 

jquery:

    $(document).on('click','#item1', function() {      $("#second. #third").fadeout(2000, function(){         $("#first").fadein(6000);     });  });   $(document).on('click','#item2', function() {      $("#first, #third").fadeout(2000, function(){         $("#second").fadein(6000);     }); });   $(document).on('click','#item3', function() {      $("#first, #second").fadeout(2000, function(){         $("#third").fadein(6000);     }); }); 

jsfiddle: http://jsfiddle.net/ktyxr77y/

here little bit different approach more scaleable: js fiddle

additionally, provide true fadein/fadeout crossfade can add absolute position wrappers (may need tweak placement).

added css:

#first, #second, #third { position: absolute;} 

jquery:

$('li').on('click', function() {     //get last character of li     var lastchar = $(this).attr('id').slice(-1);     //set section change based on last character of li's id      if (lastchar == 1) {         section = $('#first');     }     if (lastchar == 2) {         section = $('#second');     }      if (lastchar == 3) {         section = $('#third');     }      $('#first, #second, #third').not(section).fadeout(1000, function() {         $(section).fadein(1000);     }); }); 

note: sped transitions demonstration only.