jQuery、queue([])でanimateをキャンセル
ここ2年くらいでjQueryとuupaaなどの優れたJavascript libraryのおかげでJavascriptでアニメーションやインタラクションを実装する機会が増えました。で、インタラクション（clickやhoverなど）でアニメーション（animate）が発動するパターンによるちょっと思った挙動にならなかったことが何度かありました。
原因はanimateにあり、animateをインタラクションによってそのまま何度もアサインしていくと、同じアニメーションがqueue（キュー）というメソッドの配列に入り、これが原因で何回も再生されたり（それが意図するものならばいいんですが）、animateのcallback（アニメーション処理終了後に発動させる関数）でラグをもたせるようなものをアサインすると、再生回数が増す度にラグの秒数が長引いたりします。これが一体どこが原因なのか探るのになかなかanimate自身を疑わない（だって検証されてるものだろうしって思ってしまうから）ので他の部分でどうにかしようとガチャガチャしました。もっと本格的なJSerは違うのかもしれないですけど、どうにも僕レベルだとガチャガチャしてしまいます。
対処法
そんな時は、queueメソッドに空の配列をいれてやることをおすすめします。こうすると事前のanimateが全てキャンセルされます。
下の例は、hogeというidの要素のcss()メソッドで初期設定してwidth:500px,height:200pxになるように1000msでアニメーションします。アニメーション際中に要素をクリックするとアニメーション終了後にwidth:20px、height:20pxにアニメーションします。
$('#hoge_B').click( function(){
$(this).animate({width:20, height:20},500)
}).css({width:200, height:200, background:'#000'}).animate({width:500, height:200},10000)
この場合でよければいいんですが、clickイベント後にすぐにアニメーションを切り替えたい場合はこのままではできないわけです。
で、下の例は、clickイベントにあてたアニメーションに「queue([])」という空の配列でクリアすることで、アニメーション際中でも次のアニメーションを開始することができます。ま、$(this).stop()とかでもよいのですが一度しかアニメーションしたくない場合などは使えるかもしれません。
$('#hoge_B').click( function(){
$(this).queue([]).animate({width:20, height:20},500, function(){ $(this).stop().queue([]) })
}).css({width:200, height:200, background:'#000'}).animate({width:500, height:200},10000)
