Jquery slidesToggleが呼び出された後に完全に開かない

Question

JQueryでトグルアニメーションに問題があります。サブアイテムがあるメニューがあり、メインアイテムのホバー上をスライドしてスライドします。しかし、これは大丈夫ですが、長い項目のリストでは、slideDown（）アニメーションが完了するのを待たずに、オープニングを止め、メニューをスライドさせてシャットダウンすることができます。

$('.menubar-topitem').on('mouseenter',function(){ 
    $(this).children('.menubar-inner').stop(true).slideDown(); 
}).on('mouseleave',function(){ 
    $(this).children('.menubar-inner').stop(true).slideUp(); 
}); 

このコード

は、しかし、私は当時のメニュー項目にカーソルを合わせると、サブメニューが唯一の私はそれを最初に停止する前に、アニメーションが達し限り開き、私が必要とするもの実現しています。 JQueryは、アニメーションが初めて停止したときのサブメニューの高さを保存していて、2回目までしか開きません。

私はstop（true、true）を使用してこの問題を解決できることを認識していますが、これはアニメーションに恐ろしいジャンプを引き起こします。とにかく、アニメーションを完成させることなくこの動作を防ぐことができますか、またはユーザーがジャンプを見ることはできませんが、フローティングメニューシステムが表示されるように回避することはできますか？

Answer 1

これに対する修正は、明示的にかなりslideUp/slideDown機能に応じてよりハードコードされた値をアニメーション化することである。

$('.menubar-topitem').on('mouseenter',function(){ 
    var $this = $(this), 
     height = $this.children('.menubar-inner').children().height(); 
    $this.children('.menubar-inner').stop().animate({height : height}, 250); 
}).on('mouseleave',function(){ 
    $(this).children('.menubar-inner').stop().animate({height : 0}, 250); 
}); 

はその後アニメーション要素についてhiddenにCSS overflowプロパティを設定します。また、動的にすることができます巣それらでdiv.menubar-inner要素の高さを取得し、そのdiv要素の高さを取得します

HTML--

<div class="menubar-topitem"> 
    <h1>This is a Menu Top Item</h1> 
    <div class="menubar-inner"> 
     <div> 
      <p>Some Content</p> 
      <p>Some More Content</p> 
     </div> 
    </div> 
</div> 

CSS--

.menubar-inner { 
    overflow : hidden; 
    height : 0; 
} 

をここにデモがあります：http://jsfiddle.net/n6h2S/

fadeIn/012と同じ問題が発生します。しかし、fadeToと呼ばれる別の機能があり、明示的に不透明度をフェードするように設定できます。