jQueryで、CSSを操作して、アニメーションをしたい時があると思います。
そんなときはたいてい、
[js]
$("#box1").css({color:"#F00"}).animate({left:"300px"},4000);
[/js]
の様なscriptを書くと思います。
また、
“アニメーションしてから、文字色変えたい！！”
なんてことはよくあると思います。
そして、きっと僕みたいな人は、こんなコードを想像するわけです。
[js]
$("#box2").animate({left:"300px"},4000).css({color:"#F00"});
[/js]
しかし、現実は、こちらのデモのように、CSSが操作されてから、アニメーションをしてしまうのです。一番最初の例と全く変わらない動作をしてしまいます。
現実というのは時に残酷ですね。
実は、jQueryのanimateというメソッドは「アニメーションをしなさい」という命令ではなく、
「アニメーションをキューに登録しなさい！」
という意味なのです。
キュー、queueは平たく行ってしまうと、アニメーション等の台本みたいなもので、キューに溜まっている処理は上から順番に処理されます。
jQueryにはたくさんのメソッドがありますが、大きく分けると、css()等のCSS操作、append()等のDOM操作その他、キューを使わないメソッドと、animate()やfadeIn()、fadeOut()、fadeTo()、等キューを使うメソッドに分かれます。ついでに言うなら、stop()はキュー上の処理の停止をするメソッドなのです。
キューを使うメソッドは基本的にはアニメーション等の処理に時間を設定するものがほとんどだと思います。ちゃんと本家のリファレンスを隅まで熟読したわけではないのでちょっとあれですが・・・
こんな時、一つは、callbackを使えば解決できます。
animate等のcallbackを使う
[js]
$("#box3").animate({left:"300px"},4000,function(){
$(this).css({color:"#F00"});
})
[/js]
しかし、いまいちスマートじゃないですし、メソッドチェーンをここからつないでいくのは可読性的に宜しくない気がします。昔これでネストさせすぎてよく分からないコードになってしまったことがあったりなかったり・・・
そこで、queue(callback)を使います。
queue(callback)を使う
[js]
$("#box4").animate({left:"300px"},4000).queue(function(){
$(this).css({color:"#F00"}).dequeue();
});
[/js]
としてあげると、これもちゃんと動作します。
これを使う一番のメリットとしては、delay()等のメソッドが使えるということです。
dequeue()について
また、ここでdequeue()という見慣れないメソッドが出てきました。dequeue()はキューに溜まっている先頭の処理を実行するというメソッドです。
通常、キューを使わないメソッドには、次の処理を実行する機能がありません。
こちらのデモを見てもらうとわかると思いますが、dequeueしていない#box1の方は最後のanimate()が実行されずに停止しています。
animate()などは、dequeue()を勝手にやっているのですが、css()等はそういうわけにもいかないので、最後には必ず、
[js]
$(this).dequeue();
[/js]
を追加しておきましょう。お行儀みたいなものですね。
これでみんなも立派なjQueryアニメーター、デビュー！
jQueryはとても手軽で便利でハードルが低いですが、ちょっと突っ込んだことをして躓くと逆にjQuery流で解決しないといけない気がするものなのでちょっと面倒ですね。
まぁフレームワークなど、高度に抽象化されたものにはどうしても付いて回るものなのだとは思いますが、ちゃんと一度はソースを読んで理解しておきたいですね。僕は全くやれていないですが・・・