jqueryで高さを失うことなく高さをトグル

Question

私は入れ子divを持っています。ユーザーが親divをマウスオーバーすると、子divが表示されます。 マウスを離すと、子divは非表示に戻ります。

私が抱っていた問題は、私の親のdivで5回と言うとすぐにマウスオーバーすると、slideToggleエフェクトが5回再生され、アニメーションが終了するまで待たなければなりませんでした。

だから、私はslideDown()前.Stop()を追加しましたが、今、もし私のマウスうち前に、子divが現在の高さは、それが新たな高さだということになり、完全な高さに達します。次回はマウスを上に移動すると、部分的にしか表示されません（または、親のdivでマウスを削除したときにはまったく表示されません）

この問題を解決するにはどうすればよいですか？

私はすぐにdemo on JsFiddle

感謝を嘲笑しています。

Answer 1

あなたはこのように見えるようにコードを変更する必要があります。

$('div#div2', this).not(":animated").slideDown(); 

.NOT（「：アニメーション」）は、現在アニメーションされていないだけで、選択の要素（マッチングセットの中）にjQueryのを教えてくれます。これにより、要素が二重アニメーション化されないことが保証されます。

.stop（）と違って、これはあなたのアニメーションを不完全にしていないので、高さの問題はこのように修正されます。

jsFiddle：http://jsfiddle.net/YrRe4/1/

Answer 2

また、真の両方を持っている）（.stopのブールパラメータを定義することができます。 .stop（true、true）キューを終了し、アニメーションの最後にジャンプします。