transition example

by mtenschert

HTML

<div class="test" id="test"></div>
<button onclick="move();">Move</button>

CSS

.test {
    position:absolute;
    background:blue;
    width:200px;
    height:200px;
    top:40px;
    transition:all 1s linear;
    left: 0;
}
.moved {
    left:60px;
    background:red;
}

JavaScript

window.move = function() {
    if($('#test').hasClass('moved')) {
        $('#test').removeClass('moved');
    }else{
        $('#test').addClass('moved');
    }
}