プログラムデザイナーへの旅路

こんばんは！本日はjQueryに関する小技をサクッとご紹介！

animateの動きがなんだかおかしいぞ…

jQueryでanimateを使った時に、ボタン連打したり、ホバー連打したら動きが変になることありませんか？

何が原因で、どう対処すればいいのかわからない！

ボクがjQueryを使い始めた頃は完全にそんな感じでした。

例えば、aをクリックした時にbがanimateするとします。

こんな感じ

$(".a").click(function(){
    $(".b").animate({"marginLeft" : "-100%"});
});

スライド式のカルーセルとか作る時に使う感じのコードですね！

この場合、animate中にaを3回連続でクリックしたとすると3回分動きます。クリックをメッチャ連打した時にはカオス状態になります…

上記コードだと、クリックした回数分一旦キャッシュとして処理をストックしてしまうからなんですねー

コンピューターはクリックした回数分処理しなきゃ！って思うけど、実際は一つの処理が終わってからじゃないと次の処理に行けないのでカオス状態を招いてしまうのです…

そこで、もし一つの処理が終わる前にクリックされたら、強制的に処理を終了して次の処理を行う方法があります。

それがこれ

$(".a").click(function(){
    $(".b").stop().animate({"marginLeft" : "-100%"});
});

メッチャ簡単。animateの前に.stop()を入れてあげるだけです。

これだけでもカオス状態になることは避けられます。

hoverイベントのslideToggleとかfadeToggleとかはこれが向いてます。

でもカルーセルとかだと、動いてる間はどれだけクリックしても次の処理をしないようにしたい！！っていう時もあると思います。

そんな時はこれ

$(".a").click(function(){
    if($(".b").is(":animated")){
        return false;
    }
    else{
        $(".b").animate({"marginLeft" : "-100%"});
    }
});

コイツはシンプルながら破壊力抜群です！

これだとanimate中は処理をしないで、animateしてなかったら処理をするため、カルーセルとかに向いてます。

まぁ、前後の処理によってはreturn falseを使うとマズイ場合とかもあると思うので、その辺は臨機応変な感じでの利用にはなりますが…

基本的に上記のどちらかでanimateが変になる時の対処はできるかなーと思っておりますっ！

ってな感じで本日はjQueryのanimateに関するお話でしたっ！

ありがとうございました！