Transition Events

by stopsatgreen

HTML

<p id="trigger">Start</p>
<div id="panel">Hello I'm a idiot</div>

CSS

#panel { -moz-transition: opacity 1s; }
#panel.fadeOut { opacity: 0; }

JavaScript

$('#trigger').on('click',function(e){
    $('#panel').addClass('fadeOut').one('transitionend',function(e){
        $(e.currentTarget).text('Plop').removeClass('fadeOut');
    });
});