jQueryでCSS3アニメーションの終了のタイミングを取得する方法

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

こんにちは。Toshikuraです。今回のTipsは【jQueryでCSS3アニメーションの終了のタイミングを取得する方法】です。先日【CSS3でアニメーション【番外編】- CSS3アニメーションで動作するjQueryスライダーを作ってみる!】という記事を書きましたがその更なる続編になります。jQueryではアニメーション終了のタイミングをanimate({},function(){~~~})やanimetedで取得できますが、CSS3でのアニメーションでは少し記述が異なります。

実装方法

jQueryのbindやon,one等でCSS3の終了イベント(transitionend)にコールバック関数を紐づけ実装可能です。念のためjQueryのみでのアニメーション終了の取得も併記しておきますので色々試してみると面白いかもしれません。

CSS3
$(“#ID”).bind(“oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend”,function(){
console.log(‘animated!’);
});
jQuery
$(“#ID”).animate({‘width’:’800px’},1000,function(){
console.log(‘animated!’);
});

以上になります。