jQuery transition completion events

by Ben Clayton

HTML

<div class='box'></div>
<div class='box right'></div>
<div class='box'></div>
<div class='box right'></div>
<div class='box'></div>
<div class='box right'></div>

CSS

.box {
    /* vendor prefixes excluded for brevity */
    transition: width 10s linear,
                border-color 10s linear,
                background-color 10s linear;
    width:1px;
    height:20px;
    margin:1px;
    background-color:#D0FFD0;
    border:1px solid green;
    clear:both;
    float:left;
}
.right {float:right;}

.change-size {
    width: 500px;
    border:1px solid red;
     background-color:#FFD0D0;

    /* height: 200px; */
}

JavaScript

function grow(){
                console.log('1width:'+$('.box').width());
        $('.box').addClass('change-size');
                console.log('2width:'+$('.box').width());
        $('.box').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
            function(e) {
                console.log('evt:'+e.type+' width:'+$(this).width());
                // code to execute after transition ends
                if($(this).width()>100){
                    $('.box').removeClass('change-size');
                }else{
                    $('.box').addClass('change-size');
                }
            }
        );
}

grow();