jQuery API の dequeue( [queueName] ) は、指定した要素のキューの次の関数を実行するメソッド。
引数
- [queueName]
オプション。
対象キューを名前で指定できる。指定がない場合、デフォルトのエフェクトキューを対象とする。
実装例（サンプル）
実装例（サンプル）の動作について
- 「dequeue() あり」ボタンをクリックすると、ボタンの下のオレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、ブロックの背景色がピンク色になり、最後に、高さが50pxから200pxへアニメーション変化する。
- 「dequeue() なし」ボタンをクリックすると、ボタンの下のオレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、ブロックの背景色がピンク色になる。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-click' ) . click( function() {
jQuery( '#jquery-api-animate' )
. css(
{
width: 50,
height: 50,
backgroundColor: 'orange',
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'pink' } ) . dequeue();
} )
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
jQuery( '#jquery-api-animate-click-2' ) . click( function() {
jQuery( '#jquery-api-animate-2' )
. css(
{
width: 50,
height: 50,
backgroundColor: 'orange',
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'pink' } );
} )
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-click' ) . click( function() {
jQuery( '#jquery-api-animate' )
. css(
{
width: 50,
height: 50,
backgroundColor: 'orange',
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'pink' } ) . dequeue();
} )
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
jQuery( '#jquery-api-animate-click-2' ) . click( function() {
jQuery( '#jquery-api-animate-2' )
. css(
{
width: 50,
height: 50,
backgroundColor: 'orange',
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'pink' } );
} )
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-animate,
#jquery-api-animate-2 {
background-color: orange;
height: 200px;
width: 200px;
}
-->
</style>
<!--
#jquery-api-animate,
#jquery-api-animate-2 {
background-color: orange;
height: 200px;
width: 200px;
}
-->
</style>
HTML
<p>
<button id="jquery-api-animate-click">dequeue() あり</button>
</p>
<div id="jquery-api-animate"></div>
<p>
<button id="jquery-api-animate-click-2">dequeue() なし</button>
</p>
<div id="jquery-api-animate-2"></div>
<button id="jquery-api-animate-click">dequeue() あり</button>
</p>
<div id="jquery-api-animate"></div>
<p>
<button id="jquery-api-animate-click-2">dequeue() なし</button>
</p>
<div id="jquery-api-animate-2"></div>