Why the last list in the slider not fadeIn/FadeOut/show/hide?

Question

I have an easyslider with divs within lists to show content, such that when I hover over one list, the hidden div is displayed via fadeIn Fadeout Jquery.

It works fine for all the list except the last list.Where in the Hidden Content just does not show up. Can some one please help ?

One think I have noticed is that when i insert a blank list after the last list, it seems to work. Is that the only work-around this?

Link to DropBox:https://dl.dropboxusercontent.com/u/7940498/testtes/bb/01Test_X.html

Jsfiddle:http://jsfiddle.net/newbie_ready_to_learn/kQnFj/1/

<script>
$(document).ready(function() {
    $("#Cont_All1").hover(function(){
        $("#HiddenCont1").fadeIn(700);
},function(){
        $("#HiddenCont1").fadeOut(900);
});

 $("#Cont_All2").hover(function(){
        $("#HiddenCont2").fadeIn(700);
},function(){
        $("#HiddenCont2").fadeOut(900);
});

 $("#Cont_All3").hover(function(){
        $("#HiddenCont3").fadeIn(700);
},function(){
        $("#HiddenCont3").fadeOut(900);
});

 $("#Cont_All4").hover(function(){
        $("#HiddenCont4").fadeIn(700);
},function(){
        $("#HiddenCont4").fadeOut(900);
});
});

</script>


<div>
<li>
<div #Cont_All1>
      <div Img>
      </div>
     Content
      <div #HiddenCont1>
     </div>
</div>
</li>

<li>
<div #Cont_All2>
      <div Img>
      </div>
     Content
      <div #HiddenCont2>
     </div>
</div>
</li>

<li>
<div #Cont_All3>
      <div Img>
      </div>
     Content
      <div #HiddenCont3>
     </div>
</div>
</li>

<li>
<div #Cont_All4>
      <div Img>
      </div>
     Content
      <div #HiddenCont4>
     </div>
</div>
</li>
</div>

Please create a jsfiddle.net or equivalent. People will be reluctant to download your code pages. — DreamTeK
jsfiddle.net/newbie_ready_to_learn/kQnFj/1 here is the jsfiddle file. i hope the border styles make sense. — hello_world
yes, i dont know how the fourth is kept at the top in jsfiddle..if you open the drop box link, its the fourth one in which the hover - does not work. — hello_world

BAD_SEED BAD_SEED · Accepted Answer · 2013-09-24T11:53:12

I've tried to remove the first block that goes from <li><div id="Cont_All1"> on line 5 to </div></div></li> on line 25 and the problem didn't happen.

So there's no problem in jQuery code, but probably you forgot to close some tag or make some id mistake in your HTML code. So... I've tried to remove the first block, copy the second block and rename it with Cont_All1 and HiddenCont1 instead of Cont_All2 and HiddenCont2 and the job is done, easily as you can see here.

Why the last list in the slider not fadeIn/FadeOut/show/hide?

1 Answers