jquery - RDPメニューバーのようなjqueryドロップダウンを作成する

Question

私はjqueryにあまり精通していないので、これを行う方法がよくわかりません。基本的に、HTMLのブロックをページの上部に非表示にして、約3pxのエッジを突き出させて（マウスオーバーするもの）、その上にマウスを置くと、非表示のセクションが下にスライドします。

基本的には、RDPのフルスクリーンメニューバーが機能するように機能させたいと思います。これを行うための最良の方法について何か考えはありますか？

Answer 1

jquery：

$("#slide").bind("mouseover", function() {
     $(this).animate({
          top: '+=189'                      
     });
}).bind("mouseout", function() {
     $(this).animate({
          top: '-=189'                      
     });
});

スタイル：

   <style type="text/css">
   #slide {
     background:#ccc;
     border:1px solid #000;
     width:200px;
     height:200px;
     padding:10px;
     position:absolute;
     top:-190px;
     }
  </style>

html：

<div id="slide">
test<br>
test<br>
test<br>
test
</div>

Answer 2

あなたはJqueryUIの助けを借りてそれを行うことができるはずです

http://jqueryui.com/demos/hide/ ドロップダウンメニューでスライドを選択します。

Answer 3

回答ありがとうございます。上記のコードを少し調整することで、.hover（）メソッドの上にあることがわかりました。上記のJavaScriptは次のようになります

$("#slide").hover(function () {
            $(this).animate({
                top: '+=30'
            });
        }, function () {
            $(this).animate({
                top: '-=30'
            });
        });