同時多発アニメーションは、jQuery の animate( properties, options ) メソッドの2つ目の引数のoptions（オプション）内で、 queue（キュー）に false を指定することで可能。
- queue に false を指定すると、複数のアニメーションを、同時に実行する。
- queue に true を指定すると、複数のアニメーションを、順番に実行する。
実装例（サンプル）
実装例（サンプル）の動作について
- 「queue: false」ボタンをクリックすると、オレンジ色のブロックが、幅と高さが同時に、50pxから200pxへアニメーション変化する。
- 「queue: true」ボタンをクリックすると、オレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、高さが50pxから200pxへアニメーション変化する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-queue-false' ) . click( function() {
jQuery( '#jquery-api-animate' )
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 'slow',
easing: 'swing',
queue: false,
}
)
. animate(
{
height: 200,
},
{
duration: 'slow',
queue: false,
}
);
} );
jQuery( '#jquery-api-animate-queue-true' ) . click( function() {
jQuery( '#jquery-api-animate' )
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 'slow',
easing: 'swing',
queue: true,
}
)
. animate(
{
height: 200,
},
{
duration: 'slow',
queue: true,
}
);
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-queue-false' ) . click( function() {
jQuery( '#jquery-api-animate' )
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 'slow',
easing: 'swing',
queue: false,
}
)
. animate(
{
height: 200,
},
{
duration: 'slow',
queue: false,
}
);
} );
jQuery( '#jquery-api-animate-queue-true' ) . click( function() {
jQuery( '#jquery-api-animate' )
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 'slow',
easing: 'swing',
queue: true,
}
)
. animate(
{
height: 200,
},
{
duration: 'slow',
queue: true,
}
);
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
div#jquery-api-animate {
background-color: orange;
height: 200px;
width: 200px;
}
-->
</style>
<!--
div#jquery-api-animate {
background-color: orange;
height: 200px;
width: 200px;
}
-->
</style>
HTML
<p>
<button id="jquery-api-animate-queue-false">queue: false</button>
<button id="jquery-api-animate-queue-true">queue: true</button>
</p>
<div id="jquery-api-animate"></div>
<button id="jquery-api-animate-queue-false">queue: false</button>
<button id="jquery-api-animate-queue-true">queue: true</button>
</p>
<div id="jquery-api-animate"></div>