前回「jQuery初心者のために!jQueryの使い方スライドショー編」でスライドショーを作ってみたものの、アニメーションが思ったように動かなくて、、、
ボタンを連続でクリックすると、アニメーションが連続再生されてすごいことになってしましました。
jQueryはjquery-1.10.2.min.jsを使ってます
おかしなことになったスライドショーはこちら
ボタン連打するとしばらくスライドが止まりません・・・
これは、困った。
jQueryはアニメーションが終了してから、次のアニメーションを実行するようにできているそうです。
アニメーションのが実行されている時に「アニメーションしてね」と指示を出しても、「今アニメーション中なので待ってね、終わったらするから」となるみたい。
この待ってる指示を「キュー(queue)」と言う仕組みが記憶してくれているらしいのですが。
jQueryにはこの「キュー」に「今待ってる指示なかったことににして」というAPIがありました!
今回はこれを、ちょっと試してみようかと。
jQueryはjquery-1.10.2.min.jsを使ってます
あ!実際につくったものはこちら
つかったAPI
.clearQueue([queueName])
このAPIがキューで記憶している、実行されてない関数を削除してくれるます。
今回使わなかったですが、[queueName]で消去するキューを指定するこができるみたいです。
こんな感じで使いました
//まずアニメーションを指示してやります $("#slide ul").animate({ //アニメーションさせたいことを入力します CSSでの制御 left:500//leftの値を現在の値から500へ },500,"linear",function() { //アニメーションが終わったときにさせたいことを入力します $("#slide ul").clearQueue(); //こうして、「$("#slide ul")」のアニメーションにたまったキューを //「clearQueue()」をつかって削除します });
アニメーションが終わった時に、他のアニメーション指示を削除してやれば、連続してアニメーションされることがなくなります。
他にもアニメーションを制御する方法として「.stop()」もあるそうです。
サンプルの実行文
$(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(); }); } });
こんな感じで連続再生は阻止できました。
次は、時間経過で自然とスライドするようにしてみたいな。
アニメーションを止める前にそもそも実行させないようにしたら?
ふと思いついて調べたらありました。。。
.not(":animated")
これを追記することで、アニメーション処理中やと追加でアニメーションさせないことができます。
$("#slide ul").not(":animated").animate({ //アニメーション処理 },500,"linear",function() { //アニメーションが終わったら実行されるとこ });
こんな感じ。なるほどなぁ~
もまえらもやってみれば〜
|Д´)ノ~~ アディオス アミーゴ!