delay( duration, [queueName] )

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>

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, エフェクト, カスタム タグ: パーマリンク