Cross-browser transitionend event

by HYEONGJINKIM

HTML

<button>Test</button>
<div id='log'></div>

CSS

button {
    width: 100px;
    -webkit-transition: all 1s;
}
.transition {
    width: 150px
}

JavaScript

//set it up
$('*').live('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
    $(this).trigger('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').text($('#log').text()+'#')
}