jQuery アニメーションの順番(アニメーション後CSS書き換え)

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

ちょっとメモ。

jqueryのアニメーソションの順番をつけたい事がたまにあります。
そんな時は”complete”を活用しましょう♪

ちなみにプロパティはこんな感じ。

animate( properties, [ duration ], [ easing ], [ complete ] )

アニメーション後CSS書き換える例


<script>
$("#AAA,#BBB").animate({opacity:0,},
{duration:"slow",complete:
function() {
$("#AAA,#BBB").css({"font-size":"30px"});
$("#CCC").css({"font-sixe":"50px"});
},
});
</script>

上記の例では…

①#AAAと#BBBがまず透過
②上記後、#AAAと#BBBがfont-size:30px;に
③同時に#CCCもfont-size:50px;に

という感じです。