为什么滑块中的最后一个列表不是fadeIn / FadeOut / show / hide?

时间:2013-09-24 10:08:44

标签: jquery css list slider fadein

我在列表中有一个带有div的easyslider来显示内容,这样当我将鼠标悬停在一个列表上时,隐藏的div将通过fadeIn Fadeout Jquery显示。

它适用于除最后一个列表之外的所有列表。隐藏内容中的任何内容都不会显示。 有人可以帮忙吗?

有人认为我注意到,当我在最后一个列表后插入一个空白列表时,它似乎有效。 这是唯一的解决方法吗?

链接到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>

1 个答案:

答案 0 :(得分:0)

我尝试删除第5行的第<li><div id="Cont_All1">行到第25行的</div></div></li>,但问题没有发生。

因此jQuery代码没有问题,但可能您忘记关闭某些标记或在HTML代码中犯了一些id错误。所以...我试图删除第一个块,复制第二个块并使用Cont_All1HiddenCont1而不是Cont_All2HiddenCont2重命名它,作业是完成后,您可以轻松地看到here