悬停在li上的jQuery动画

我想要一个悬停在

上的动画，它将从顶部滑动，在鼠标移出时，它将滑动到顶部。 我已经做了所有的事情，但是有一个小问题。 请查看我的演示

我的密码是 CSS

剧本

$(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');


      });
});

$（文档）.ready（函数（）
{    
$（'#nav li a'）。附加（''）；
$（'#nav li a'）。悬停（函数（）{
$（'.hover'）.stop（true，true.slideDown（'1000'）；
}, 
//鼠标消失，消失悬停类
函数（）{
$（'.hover'）.stop（true，true.slideUp（'1000'）；
})。单击（函数（）{
//如果用户单击所选类，则添加该类
$（this.addClass（'selected'）；
});
});

HTML

但我只查看.hover div正在滑动，但我的主文本没有查看。我也在标签中添加了z-index，但幻灯片运行时，文本不会被查看

请帮我整理一下。

---

提前感谢大家。

为

设置
z-index:-1
。悬停
。这将解决问题

演示：

并注意您的
fadeIn
和
fadeOut
通话。如果需要将速度设置为毫秒数，则其参数应为整数，即不带引号
fadeIn（1000）
谢谢VisionN，我已经完成了。但我看到它不起作用了。你能建议如何为IE额外编码，以便它在IE.Hm中正常工作吗。它应该在IE中工作得很好。我有IE9，它工作得很好。是的，我已经解决了这个问题。我所做的只是对脚本$（'#nav li a'）进行了更改；和$（this.children（'div'）。stop（true，true）。fadeIn（'1000'）；在IE中查看的问题我看到它在上传到我的服务器时得到了解决。但是，当从本地浏览器工作时，它在IE中不工作。我不知道为什么？你可以在这个链接中看到Hm.
阿弥陀佛。在
中，linbk似乎没有打开。但是，在更新的小提琴中，您仍然有
z-index:0
。很抱歉，我提到的更新的小提琴不正确，您可以在此处查看
$(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');


      });
});

<ul id="nav">

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


  </ul>