このサンプルは、jQueryのanimate()APIを利用してdiv要素を拡大します。サンプルの[Animate1]ボタンをクリックするとdiv1要素が拡大されます。[Animate2]ボタンをクリックするとdiv2要素が拡大されます。[Reset]ボタンをクリックするともとのサイズに戻ります。Animate1ボタンは、animate()APIの引数にqueue:falseを指定して3種類のアニメーション(幅、フォントサイズ、ボーダー幅を変える)を同時に実行させます。Animate2ボタンは、3種類のアニメーションを順番に実行させます。
animate(params[,options])
animate()APIの引数paramsには、CSSのプロパティを指定します。引数optionsには、animate()APIのオプションを指定します。ここでは、引数optionsにqueue:falseとduration:3000を指定しています。queue:falseを指定すると、複数のanimate()APIが同時に実行されます。queue:trueのときは、複数のanimate()APIを実行してもキューされて順番に実行されます。
$("#btnRun1").click(function(){
$("#div1")
.animate( { width:"90%" }, { queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#btnRun2").click(function(){
$("#div2")
.animate( { width:"90%"}, 1500 )
.animate( { fontSize:"24px" } , 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#btnReset").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
<button id="btnRun1">Animate 1</button>
<button id="btnRun2">Animate 2</button>
<button id="btnReset">Reset</button>
<div id="div1">Hello #1</div>
<div id="div2">Hello #2</div>