jQueryでCSSのtransitionの終了を検知する方法

CSSでtransitionを使って楽にアニメーションできるようになったのはいいが、ゴリゴリのjQueryに絡ませるとアニメーションの終了を検知する必要があったりするので、その方法を調べてみました。

検知する方法

サンプル

青いボックスをクリックすると、ボックス上に「開始」のテキストが表示されるのと同時にボックスがフェードアウト。
フェードアウトが終了すると、ボックス上に「終了」のテキストが表示されるようになっています。

ソースコード

HTML

CSS

JavaScript

解説

transitionの終了検知は、「transitionend」のイベントを取得します。
基本的な書き方は以下の様になります。

しかしブラウザによって実装が異なるようなので、各ブラウザのイベント名を列挙した書き方になります。

サンプルではこんな書き方しています。