Cross-browser transitionend event
HTML
<button>Test</button>
<div id='log'></div>
CSS
button {
width: 100px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
.transition {
width: 150px
}
JavaScript
//set it up
$('*').on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function (e) {
$(this).triggerHandler('trans-end');
});
//test it
$('button')
//start transition on click
.click(function () {
$(this).toggleClass('transition');
})
//cross-browser transitionend event handler
.bind('trans-end', count);
function count () {
$('#log').html($('#log').html()+'transition finished <br />')
}