javascript - Fade image containers -

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 couple of problems, such content not fading, , problem in delay of fade in , out of content, leading collisions between contents, anyway apply working solution on elements of menu?

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:https://jsfiddle.net/co5tpz2p/1/

ok, had drastic changes in html, working wanted now. check updated fiddle.

the new approach have #container div responsible fades, while inner divs (#first, #second , #third) shown/hidden according button clicked.

note: removed button a's onclick attribute since checklist function not defined in fiddle , spitting error. don't forget readd if you're going use solution.