jQuery API の delay( duration, [queueName] ) は、キュー内の後続の項目の実行を遅らせるタイマーのようなメソッド。
引数
- duration
ミリ秒単位の数字、もしくは、’slow’、’normal’、’fast’ の文字列で指定。
例えば、2000 を指定すると、2秒遅れて実行する。
- [queueName]
オプション。
キューの名前を指定できる。指定がない場合、デフォルトのエフェクトキューを遅らせる。
実装例(サンプル)
①
②
③
実装例(サンプル)の動作について
オレンジ色のボックスにカーソルを合わせると、①のボックスがスライドダウンで現れ、次に、②のボックスが現れ、最後に、③のボックスが現れる。
オレンジ色のボックスからカーソルを外すと、③のボックスがスライドアップで消え、次に、②のボックスが消え、最後に、①のボックスが消える。
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-hover' ) . hover(
function() {
jQuery( '#jquery-api-animate-1' ) . slideDown( 'slow' );
jQuery( '#jquery-api-animate-2' ) . delay( 1000 ) . slideDown( 'slow' );
jQuery( '#jquery-api-animate-3' ) . delay( 2000 ) . slideDown( 'slow' );
},
function() {
jQuery( '#jquery-api-animate-3' ) . slideUp( 'slow' );
jQuery( '#jquery-api-animate-2' ) . delay( 1000 ) . slideUp( 'slow' );
jQuery( '#jquery-api-animate-1' ) . delay( 2000 ) . slideUp( 'slow' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-hover' ) . hover(
function() {
jQuery( '#jquery-api-animate-1' ) . slideDown( 'slow' );
jQuery( '#jquery-api-animate-2' ) . delay( 1000 ) . slideDown( 'slow' );
jQuery( '#jquery-api-animate-3' ) . delay( 2000 ) . slideDown( 'slow' );
},
function() {
jQuery( '#jquery-api-animate-3' ) . slideUp( 'slow' );
jQuery( '#jquery-api-animate-2' ) . delay( 1000 ) . slideUp( 'slow' );
jQuery( '#jquery-api-animate-1' ) . delay( 2000 ) . slideUp( 'slow' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-animate-hover,
#jquery-api-animate-1,
#jquery-api-animate-2,
#jquery-api-animate-3 {
padding: 5px;
width: 200px;
border: 1px solid gray;
text-align: center;
}
#jquery-api-animate-hover {
height: 30px;
background-color: #ff8000;
}
#jquery-api-animate-1,
#jquery-api-animate-2,
#jquery-api-animate-3 {
display: none;
border-top: none;
}
#jquery-api-animate-1 {
background-color: #ffaa55;
}
#jquery-api-animate-2 {
background-color: #ffd5aa;
}
#jquery-api-animate-3 {
background-color: #fff4ea;
}
-->
</style>
<!--
#jquery-api-animate-hover,
#jquery-api-animate-1,
#jquery-api-animate-2,
#jquery-api-animate-3 {
padding: 5px;
width: 200px;
border: 1px solid gray;
text-align: center;
}
#jquery-api-animate-hover {
height: 30px;
background-color: #ff8000;
}
#jquery-api-animate-1,
#jquery-api-animate-2,
#jquery-api-animate-3 {
display: none;
border-top: none;
}
#jquery-api-animate-1 {
background-color: #ffaa55;
}
#jquery-api-animate-2 {
background-color: #ffd5aa;
}
#jquery-api-animate-3 {
background-color: #fff4ea;
}
-->
</style>
HTML
<div id="jquery-api-animate-hover"></div>
<div id="jquery-api-animate-1"><p>①</p></div>
<div id="jquery-api-animate-2"><p>②</p></div>
<div id="jquery-api-animate-3"><p>③</p></div>
<div id="jquery-api-animate-1"><p>①</p></div>
<div id="jquery-api-animate-2"><p>②</p></div>
<div id="jquery-api-animate-3"><p>③</p></div>