前回「jQuery初心者のために！jQueryの使い方スライドショー編」でスライドショーを作ってみたものの、アニメーションが思ったように動かなくて、、、
ボタンを連続でクリックすると、アニメーションが連続再生されてすごいことになってしましました。
jQueryはjquery-1.10.2.min.jsを使ってます
おかしなことになったスライドショーはこちら
ボタン連打するとしばらくスライドが止まりません・・・
これは、困った。
jQueryはアニメーションが終了してから、次のアニメーションを実行するようにできているそうです。
アニメーションのが実行されている時に「アニメーションしてね」と指示を出しても、「今アニメーション中なので待ってね、終わったらするから」となるみたい。
この待ってる指示を「キュー（queue）」と言う仕組みが記憶してくれているらしいのですが。
jQueryにはこの「キュー」に「今待ってる指示なかったことににして」というAPIがありました！
今回はこれを、ちょっと試してみようかと。
jQueryはjquery-1.10.2.min.jsを使ってます
あ！実際につくったものはこちら
つかったAPI
[javascript]
.clearQueue([queueName])
[/javascript]
このAPIがキューで記憶している、実行されてない関数を削除してくれるます。
今回使わなかったですが、[queueName]で消去するキューを指定するこができるみたいです。
こんな感じで使いました
[javascript]
//まずアニメーションを指示してやります
$(“#slide ul”).animate({
//アニメーションさせたいことを入力します CSSでの制御
left:500//leftの値を現在の値から500へ
},500,”linear”,function() {
//アニメーションが終わったときにさせたいことを入力します
$(“#slide ul”).clearQueue();
//こうして、「$(“#slide ul”)」のアニメーションにたまったキューを
//「clearQueue()」をつかって削除します
});
[/javascript]
アニメーションが終わった時に、他のアニメーション指示を削除してやれば、連続してアニメーションされることがなくなります。
他にもアニメーションを制御する方法として「.stop()」もあるそうです。
サンプルの実行文
[javascript]
$(function() {
/*
数値の初期値
***********************************************************************************/
//次のスライド番号 初期値
var nextSlide = 1;
//スライドの位置 初期値
var slideX = 0;
/*
クリックされると実行されるとこ
***********************************************************************************/
$(‘#button a’).click(function(){
//プログラムを呼び出す処理
slider();
//後の処理をキャンセルさせる処理？
return false;
})
/*
クリックされると呼び出されるとこ
***********************************************************************************/
function slider(){
//スライドの移動させたい位置を算出
slideX = -640*nextSlide;
//スライドアニメーション
$(“#slide ul”).animate({
//レフトの数値を変更してアニメーションさせます
left:slideX
},500,”linear”,function() {
/*アニメーションが終わったら実行されるとこ*/
//スライドが最後だったら最初の値に戻す処理
if(nextSlide == 3){
nextSlide = 0;
}else{
nextSlide += 1;
}
//キューに忘れてとお願いします
$(“#slide ul”).clearQueue();
});
}
});
[/javascript]
こんな感じで連続再生は阻止できました。
次は、時間経過で自然とスライドするようにしてみたいな。
アニメーションを止める前にそもそも実行させないようにしたら？
ふと思いついて調べたらありました。。。
[javascript]
.not(“:animated”)
[/javascript]
これを追記することで、アニメーション処理中やと追加でアニメーションさせないことができます。
[javascript]
$(“#slide ul”).not(“:animated”).animate({
//アニメーション処理
},500,”linear”,function() {
//アニメーションが終わったら実行されるとこ
});
[/javascript]
こんな感じ。なるほどなぁ～
もまえらもやってみれば〜
|Д´)ﾉ~~ アディオス アミーゴ！