忍者ブログ

[PR]

2024-03-29 17:38

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


slideUp、slideDownでstop()を上手く動作させる方法

2011-02-14 00:13

 例えば、こんなコードを書いたとします。
$(~~).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

この記事にコメントする

Name
Title
Mail
URL
Comment
Pass
Pictgram
Vodafone絵文字 i-mode絵文字 Ezweb絵文字

この記事へのトラックバック

トラックバックURL

ブログ内検索

カレンダー

02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

最新トラックバック

最新コメント

プロフィール

HN:
KUMA
HP:
性別:
男性
職業:
学生
趣味:
Web, Programing
自己紹介:
マッシュアップやプログラミングなどを行なっております。
情報に不具合が御座いましたらコメントくださると幸いです。