jQuery Animation on hover a li

Question

我想在悬停时有动画

应从顶部滑动，鼠标移出时应滑动顶部。 我已经做了所有，但有一个小问题。 请查看我的演示here

我的代码是 CSS

    #nav{width:200px;
height:60px;
background:#096;
list-style:none;
} 

 #nav li
 {
     width:200px;
     height:60px;
     float:left;
     position:relative;

}

     #nav li a
     {
         width:200px;
         height:50px;
         background:#09F;
         color:#000;
         display:block;
         position:relative;
         margin:0;
         z-index:100;

         }

         #nav li a:hover
         {
             color:#fff;
             }

         #nav li .hover
         { width:200px;
         height:50px;
         background:#000;
         color:#0FF;
        display:none;
       background-position:0 0;
       position:absolute;
       top:0;
         margin:0;
         z-index:0;
         opacity:0.9;

             }

脚本

$(document).ready(function()
 {    
  $('#nav li a').append('<div class="hover">');

  $('#nav li a').hover(function (){
      $('.hover').stop(true, true).slideDown('1000');    

        }, 

        //Mouseout, fadeOut the hover class
        function() {

            $('.hover').stop(true, true).slideUp('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


      });
});

HTML

<ul id="nav">

   <li><a href="index.html">Home</a></li>


  </ul>

但我只查看 .hover div 正在滑动，但我的主页文本没有查看。我还添加了 z-index 到标签，但是在幻灯片工作时也没有查看文本。

请帮我整理一下。 提前感谢大家。

Answer 1

将z-index: -1 设置为.hover。它会解决问题。

演示： http://jsfiddle.net/DSusn/2/

并注意您的fadeIn 和fadeOut 电话。如果您需要将速度设置为毫秒数，它的参数应该是一个整数，即不带引号fadeIn(1000)。