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

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ
ブログTOP » web » プログラミング » jQueryのアニメーションを止めるには

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

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

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

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

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.