jquery queueメソッド

TOPページに戻る > jquery入門

jquery queue()メソッド

queueメソッドは、マッチした要素上で実行される関数のキューを表示したり、操作するメソッドです
オプションでキューの名前を指定できます

.queue()

マッチした要素上で実行される関数のキューを表示します

.queue([queueName])

キューの配列を空にしてアニメーションをキャンセルさせる

.queue( [ ] )

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

ボタンをクリックすると指定した要素を移動させてqueueメソッドでキューに登録されている関数の数を表示します

jquery

$(function() {
	$("button").click(function(){
	$("#hoge").animate({left:"500px"},1000,hu)
	.animate({top:"-50px"},1000,hu)
	.animate({left:"600px"},1000,hu)
	.animate({left:"150px"},1000,hu)
	.animate({top:"0px"},1000,hu)
	.animate({left:"0px"},1000,hu)
	hu();
	});
	function hu(){
		$("#hoge").text($(this).queue().length);
	};
});

css

#hoge{
 background-color: #FFCC99;
 width: 250px;
 height: 250px;
 position: relative;
 line-height: 2em;
 font-size: 3em;
 }

html

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

サンプル

ボタン