jquery - jQuery Animation on hover a li

Question

ホバリング時にアニメーションが必要です

これは上からスライドし、マウスアウトすると上にスライドします。全部やりましたが、少し問題があります。ここで私のデモをご覧ください

私のコードは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)。