3

次のような標準のマルチレベル メニューがあります。

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Dropdown</a>
       <ul class="sub-menu">
           <li><a href="#">Link #1</a></li> 
           <li><a href="#">Link #2</a></li>  
           <li><a href="#">Link #3</a></li>            
       </ul>
    </li>    
</ul>

ソース: http://jsfiddle.net/Dg2Cb/

このページのようにサブメニューの高さをアニメートしたい (jswing 効果のように見える): http://themes.truethemes.net/Karma/

これを達成する簡単な（上記の例のように面倒ではない）方法はありますか？

これが私が作成した最高の効果です（ただし、幅もレンダリングするため、まだ見た目が悪いです）：http://jsfiddle.net/Dg2Cb/1/

jQuery イージング プラグインを使用できますが、プラグインなしでそれを行いたいと思っています。要素の高さをアニメーション化する方法は知っていますが、難しいのは、可視性を変更すると同時にアニメーション化する必要があることです。

4

3 に答える 3

3

.slideDown()要素の幅をアニメーション化しない代替手段として使用することができます。http://api.jquery.com/slideDown/

于 2012-05-21T00:50:59.733 に答える
3

これを試して：

jQuery("#nav li").hover(function() {
    jQuery(this).children('ul').slideDown();
},function(){
     jQuery(this).children('ul').slideUp();
});

http://jsfiddle.net/Dg2Cb/3/

于 2012-05-21T00:54:20.353 に答える
3

高さと不透明度の両方を一緒にアニメーション化します。

$("#nav > li").on("mouseenter mouseleave", function(e){
  e.type === "mouseenter" 
    ? $(".sub-menu", this).stop().animate({ height:'toggle', opacity:1 }, 250)
    : $(".sub-menu", this).stop().animate({ height:'toggle', opacity:0 }, 250) ;
});​

.sub-menuさらに、 - に設定しないでvisibility:hidden、代わりに に設定してdisplay:noneください。

フィドル: http://jsfiddle.net/Dg2Cb/6/

于 2012-05-21T00:59:36.873 に答える