jquery delayメソッド

TOPページに戻る > jquery入門

jquery delay()メソッド

delayメソッドは、セレクタで指定した要素のアニメーション処理を指定した時間停止するメソッドです
引数にアニメーションスピードを数字で指定します。1秒が1000です。2秒が2000でアニメーションが完了します
※第2引数の値には数字の他に"fast"、"normal"、"slow"などの文字列も指定できますfastが200、slowが600、normalが400
オプションでキューの名前を指定できます

.delay(停止する時間)

キューの名前を指定する場合

.delay( 停止する時間 [, queueName ] )

アニメーションを停止させる方法

ボタンをクリックすると指定した要素を移動させてdelayメソッドで1.5秒停止させてから元の位置に戻します

jquery

$(function() {
	$("button").click(function(){
	$("#hoge").animate({left:"500px"},1000)
	.delay(1500)
	.animate({left:"0px"},1000)
	});
});

css

#hoge{
 background-color: #FFCC99;
 width: 250px;
 height: 250px;
 position: relative;
 }

html

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

サンプル

ボタン