[jQuery]複数要素のアニメーションを同時に動作させる | 見習いの備忘録
要素を動かしつつ、透明にしたいとかいう場合は、
$('#hoge').animate({left: 0, opacity: 0}, {duration: 300});
とか書けばいいけど、要素を動かすアニメーションと透明にするアニメーションとで
アニメーションの実行速度を変えたい場合は、以下のように書く。
$('#hoge').animate({left: 0}, {duration: 300, easing: "easeOutQuad", queue: false, complete: function() { $(obj).hide(); }}) .animate({opacity: 0}, {duration: 50, queue: false} );
さらに贅沢にも要素を動かすアニメーションが終わりかけのときに
要素を透明にしたい場合、以下を参考にして、こんな風に書いてみた
JavaScriptでページのレンダリング時間をミリ秒単位で簡易計測する - 大人になったら肺呼吸
var start = new Date(); $('#hoge').animate({left: 0}, {duration: 300, easing: "easeOutQuad", queue: false, step: function() { var end = new Date(); var diff = end.getTime() - start.getTime(); if(diff >= 200) { $('#hoge').animate({opacity: 1}, {duration: 80}); } }});
すごいやっつけだけども。