jQuery : キューの stop とfadeIn / fadeOut の謎
超大作は書くのが大変すぎて続かないので、どうでもいいエントリも織り交ぜつつ、ゆるく続けていくことにしました。
今回は、jQuery の勉強でツールチップ書いたときに、謎の現象で困ったのでメモ。
つくったもの
謎の現象その1 - チカチカする
アニメーションする速度より速く、複数のリスト上を通るようにマウスを高速に動かすと、ツールチップが点滅する・・。
.fadeIn() / .fadeOut()
を .show() / .hide()
にすれば大丈夫なんだけど・・ん・・?
「あっ!これ、zudo 本で出た問題だ!」
複数の命令を順番に処理するしくみを、キュー(待ち行列)と言います。
キューに貯まった吹き出しの表示・非表示アニメーションの処理は、マウスの操作に追いつきません。
その結果、マウスの動きを止めてからも順番に処理されることになります。
この問題を解消するために、stop メソッドを利用します。
これは現在進行中のアニメーションを即座に止めるメソッドです。
(Webデザイナーのための jQuery入門 より引用)
ということで、.fadeIn() / .fadeOut()
の前に .stop()
を入れてみることにしたのが次のコード。
謎の現象その2 - ツールチップの色が薄くなる
.stop()
を追加して、一見できたように思えたのですが、また複数リストの上を通るようにしてマウスを動かしてみると、だんだんとツールチップの色が薄くなっていく・・。
ナニコレ/(^o^)\
よく分からなかったので、zudo 本に書いてある通りに、.fadeIn() / .fadeOut()
を使わずに、.animate()
を使うことにした。
完成
やったーー!!でもなんでなのかは、よくわからん。まあいいか。
このあと、オプションでカスタマイズできるように機能追加してゆく予定。
追記
@5509 さんに、.stop()
の引数使えばうまくいくって教えてもらったので、やってみたらできた・・!ありがとうございます。
.fadeIn() / .fadeOut()
の前に .stop(true, true)
を指定しています。
引数の指定が必要な理由
以下のエントリがすごい分かりやすかったです。
.stopが単純にアニメーションを停止させるだけなので、.slideDownの途中で呼び出された場合、その時点のheightが次回以降のheightとして認識されることが原因です。
今回の場合は、opacity の値が次回の opacity として認識されてしまっていたようです。
引数の渡し方の種類
引数の渡し方の違いにより、どう変わるのかのサンプルが分かりやすかったです。
今回の場合は、.stop(true, false)
だとうまくいかなかったので、.stop(true, true)
にしたらうまくいきました。