SO - 22577597

by Arun P Johny

HTML

<button>Switch</button>
<div class="parent">
    <div class="child"></div>
</div>
<div id="log"></div>

CSS

.parent {
    height: 200px;
    position: relative;
    border: 1px solid red;
}
.child {
    display: inline-block;
    height: 190px;
    width: 150px;
    position: absolute;
    background-color: lightgrey;
    left: 5px;
    top: 5px;
    transition-delay: 0s;
    transition-duration: 5s;
    transition-property: left;
}
.child.on {
    left: 50px;
}

JavaScript

$('button').click(function () {
    $('.child').toggleClass('on').one('transitionend', function(){
        $('#log').append('<p>toggled</p>')
    });
})