前回の トップページのスライドショー　アニメーションさせる でアニメーションのしくみを書き残しました。

しかし動かすだけならある程度すぐにできたのですが、

ボタン連打でバグる
という難関に、どうにも立ち往生してしまいました。

連打でバグるデモ

普通に使用したり、黙って一定時間ごとにスライドするのをみている分にはよいのですが、まぁ、とりあえず矢印を連打してみてください。

デモ1 (連打 未対策 + overflowなし)

．．． はい。こういうことです。

ようは、スライドするアニメーションが終わり切らないうちに 次のスライドの命令が来るもんで、とりあえずスライドの命令が来たものを全部オラオラってスライドさせてしまうからスライドが間に合わずスライドにスライドが重なって．．．もうよく分かりません。

そこであっちこっち探しまわって助けて頂いた記事がコチラでした！

[jQuery]クリック連打予防 : クリエイター気取り

なるほど！目からうろこであります。(°̥̥̥̥̥̥̥̥Д°̥̥̥̥̥̥̥̥ )

早速、実践します！

フラグを使う！という考え方

[javascript]

var clickFlug = true; //　※最重要!!※　クリック連打でのバグ防止のフラグを立てる

var buttonClick = function(){ //　ボタンをクリックしたときのイベント
if (clickFlug){ //　もし連打した場合、最初の一回目のクリックを判定 (フラグが " true " かどうか)
clickFlug = false; //　フラグを　" false " (クリックできなくする)してからアニメーション開始！

$(hoge).animate({
// ここにアニメーションの命令を書く
},
function(){
clickFlug = true; //　アニメーションが終了したら、フラグを　" true " (クリックを受け付ける)に戻す
}
);
}
else { //　もし連打した場合、２回目以降のクリック判定 (フラグが " false " かどうか)
return false; //　フラグが " false " なら、受け付けません！！！
}
};

[/javascript]

ということです。もうちっと噛み砕くと、

とりあえずフラグを立てる
↓
クリックする(一回目)
↓
フラグをたたむ(受付を一切拒否させる)
↓
アニメーションさせる
↓
アニメーションが終わったらまたフラグを立てる(受付OKにする)

という流れを組み込んで見ました。そしてできたのがこちらです。

デモ　完成形

デモ2 (連打対策済 + overflow: hidden)

連打してみてください！大丈夫なんです！
このフラグをON・OFFさせる手法は 他でもいろいろと応用が効きそうです。例えば、他の要素が動いているときはアニメを始めない、とか テキストの入力中は他の動作はさせないようにする、とか。

また良いことを思いついたらやってみます。以上、連打対策でした。

一定時間ごとにアニメーションさせる

これはシンプルに　setInterval()　を使用しました。

setInterval( アニメーションさせる関数名 , ミリ秒の時間 )

です。コードはコレ

[javascript highlight=”3″]

$(document).ready(function(){
var timer = function(){
setInterval( buttonClick , 5000);
};
timer();
});

[/javascript]

関数名は　()　はいりません。　” “　で囲まなくてもOK。
時間は 5000 なので5秒です。

変数timer　へ　setInterval を入れて、その変数に　()　を付けて呼び出します。今回は読み込みと同時にタイマーをスタートさせたいので
$(document).ready(function(){　〜 スクリプト 〜　});
の中に入れています。

以上！スライドアニメーション完成です！

これで当ブログのトップページのアニメーションは完成です！

次は、スライドする記事の装飾を書いていこうと思います。自動でアイキャッチを取得して、それにすりガラス的なエフェクトをかけている(つもり)ので、そのやり方や、各パーツの配置を書き残していく所存です　(=^･ω･^)ゞ