例えば、こんなコードを書いたとします。
$(~~).mouseover(function(){
$(this).slideDown("fast")
});
$(~~).mouseover(function(){
$(this).slideUp("fast")
});
これで上手くいったように見えて色々触ってみると、素早くマウスを載せたり離したりしたときに何度も閉じたり開いたりしてしまうのが分かります。
これは、アニメーション中にさらにアニメーションの命令を呼び出すと、それがキューとして保存され、次々と実行されていくからです。
それを回避するには、
$(this).stop().slideDown("fast")
などが最初に思いうかぶのではないでしょうか。ちなみに、stop()については
[jQuery]こんな機能があったんだ。jQuery stop()で詳しく解説されてます。
しかし、これでも上手くいったように見えていってません。slideUpしている最中の要素にカーソルを載せてみると、途中で止まってしまいます。カーソルを離すと、slideUpがまた始まり、……のように、slideDownが正しく機能しません。
ここでslideDown()とslideUp()の内部処理を説明しようかと思いましたが、これは知らなくてもいいし、長くなるので知りたい人は
別記事を参照してください。
正しく動作させるには、
$(function(){
※1 maxheight = $(~~).height();
$(~~).mouseover(function(){
※2 if($(this).css("display") == "none") $(this).height(0);
※3 $(this).stop(true, false).animate({height: maxheight}, "fast");
});
$(~~).mouseover(function(){
$(this).stop(true, false).slideUp("fast")
});
});
などとします。
※1ではページを読み込んでまず対象の要素の高さを退避させておきます。
※2は最初に要素が表示されていない場合に必要です。これがないと、表示されていない状態からの挙動がおかしくなります。
※3では、現在のアニメーションを中断し、かつ高さを保持したまま元の高さまでアニメーションさせます。メソッドチェーンの中に$(this).css("display", "block")などを入れて表示させる必要はありませんでした。
PR