by shigemk2

当面は技術的なことしか書かない

複数のアニメーションを同時に実行する

[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});
                     }
                 }});

すごいやっつけだけども。