同時に動作させる鍵は引数
アニメーションを実行するメソッドは以下の2通り
・animate(params, [duration], [easing], [callback])
・animate(params, options)
今回は2つ目を使用
以下記述例
$("#image").animate({
opacity:1
},
{
duration: 3000,
queue: true
})
.animate({
marginLeft:300
},
{
duration: 3000,
queue: true
})
image要素が3秒かけて透明状態から不透明へ遷移した後300px移動するアニメーションです
このソースだと上から順番に動作します。
そこで、引数optionsのqueueをfalseに変更します。
$("#image").animate({
opacity:1
},
{
duration: 3000,
queue: false
})
.animate({
marginLeft:300
},
{
duration: 3000,
queue: false
})
これだけでアルファの変更と移動が同時に行われます。
以上簡単なアニメーションを複数同時に動作させる方法でした。
※第一引数のopacityはCSS3のみ正常動作しますので、IE8以下は動作しません。
IE8以下も動作させるには以下をCSSに追加すること
-ms-filter: "alpha( opacity=0 )"; filter: alpha( opacity=0 );
これで動いてくれます。
