| jQueryのアニメーションを止めるには神戸ホームページ制作センター

前回「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() {
//アニメーションが終わったら実行されるとこ
});

こんな感じ。なるほどなぁ～

もまえらもやってみれば〜
|Д´)ﾉ~~　アディオスアミーゴ！

jQueryのアニメーションを止めるには