プログラムデザイナーへの旅路プログラムデザイナーへの旅路jQueryでanimateが変な感じになったらこうしとけ!2015.09.30こんばんは!本日はjQueryに関する小技をサクッとご紹介!animateの動きがなんだかおかしいぞ...jQueryでanimateを使った時に、ボタン連打したり、ホバー連打したら動きが変になることありませんか?何が原因で、どう対処すればいいのかわからない!ボクがjQueryを使い始めた頃は完全にそんな感じでした。aをクリックした時にbがanimateするとします。"-100%"});});スライド式のカルーセルとか作る時に使う感じのコードですね!この場合、animate中にaを3回連続でクリックしたとすると3回分動きます。クリックをメッチャ連打した時にはカオス状態になります...上記コードだと、クリックした回数分一旦キャッシュとして処理をストックしてしまうからなんですねーコンピューターはクリックした回数分処理しなきゃ!って思うけど、実際は一つの処理が終わってからじゃないと次の処理に行けないのでカオス状態を招いてしまうのです...そこで、もし一つの処理が終わる前にクリックされたら、強制的に処理を終了して次の処理を行う方法があります。"-100%"});});メッチャ簡単。animateの前に.stop()を入れてあげるだけです。これだけでもカオス状態になることは避けられます。hoverイベントのslideToggleとかfadeToggleとかはこれが向いてます。カルーセルとかだと、動いてる間はどれだけクリックしても次の処理をしないようにしたい!!っていう時もあると思います。}});コイツはシンプルながら破壊力抜群です!これだとanimate中は処理をしないで、animateしてなかったら処理をするため、カルーセルとかに向いてます。