jquery dequeueメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery dequeue()メソッド

dequeueメソッドは、指定した要素に設定したキューに待機している先頭の処理を実行するメソッドです
animate()は内部的に.dequeue()実行していますが、css()は実行してません。連続したアニメーション処理の途中でcss()を使う場合に、.dequeue()を付けてあげるとcss()を使っても、連続したアニメーションが可能です
※キューとは実行する処理を行列のように待ち状態にしていることをいいます

.dequeue()

キューに登録されている関数の数を表示する方法

ボタンをクリックすると指定した要素をアニメーションさせて、queue()でアニメーションの中にcss()をキューに登録し、.dequeue()でキューを実行させます

jquery

$(function() {
	$("button").click(function(){
		$("#hoge").animate({left:"300px"},1000).queue(function(){
			$(this).css({backgroundColor:"#0C0"}).dequeue();
		})
		.animate({left:"500px"},1000)
		.animate({left:"0px"},1000).queue(function(){
			$(this).css({backgroundColor:"#FC9"}).dequeue();
		})
	});
});
css
#hoge{
 background-color: #FFCC99;
 width: 250px;
 height: 250px;
 position: relative;
 }

html

<button>ボタン</button>
<div id="hoge"></div>


サンプル







(C)2012 ホームページ作成無料