Button transition using javascript and css, how to temporarily disable the transition

Question

Basically I have a button where I would like to hover and slide to the green (active) button then mouse out and slide to what would appear to be the opening grey unactive button but it comes in from the left, I then would like to cancel this setting so my button is back at the start without actually transitioning to it, hope that makes sense?

At the moment if I transition to the first button going from left:0 to left: -210px you see the transition because the .btn-ctn has transition on it, is it possible to temporarily disable this so the buttons effectively jump so you dont see the green middle button?

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    list-style: none;
}

body {
    padding: 20px;
}

.direction {
    width: 70px;
    overflow: hidden;
}

.btn-ctn {
    width: 210px;
    position: relative;
    left: -140px;
    -webkit-transition: left .3s ease-in-out;
}

.btn-ctn.on {
    left: -70px;
}

.btn-ctn.off {
    left: 0;
}

.btn-ctn > li {
    float: left;
    position: relative;
}

.btn {
    width: 70px;
    height: 70px;
    background: #676767;
    display: block;
}

.btn::after {
    content: '';
    width: 30px;
    height: 30px;
    border-right: 2px solid white;
    border-top: 2px solid white;
    display: block;
    position: absolute;
    top: 0; right: 15px; bottom: 0; left: 0;
    margin: auto;
    -webkit-transform:rotate(45deg);
}

.active .btn {
    background: #5cdf84;
}

.btns > li::after {

}

JS

$('.btn').on('mouseenter', function() {

    $('.btn-ctn').removeClass('off').addClass('on');

}).on('mouseleave', function() {

    $('.btn-ctn').removeClass('on').addClass('off');

    //reset to start without actually animating so if i hover over again the same animation happens as if its first time?

});

JSFiddle http://jsfiddle.net/AtZX2/2/

Answer 1

EDIT I think I figured out what you're trying to do now. You do need to move the transition property onto the on and off classes as I'd suggested earlier:

.btn-ctn {
    width: 210px;
    position: relative;
    left: -140px;
}

.btn-ctn.on {
    left: -70px;
    -webkit-transition: left .3s ease-in-out;
}

.btn-ctn.off {
    left: 0;
    -webkit-transition: left .3s ease-in-out;
}

...but the key is to then listen for the webkitTransitionEnd event in order to remove the off class after it's finished sliding:

$('.btn-ctn').on('webkitTransitionEnd', function(e)  { 
     $(e.target).removeClass('off');
});

JSFiddle demo here: http://jsfiddle.net/AtZX2/6/

Answer 2

I created a fiddle: Example

Basically you did very much right. The only big thing that it lacked, was a timeout at the end of your animation:

setTimeout(function(){
    $('.btn-ctn')
        .removeClass('on off2 animated')
        .addClass('off')
}, 300);

There might be problems synching the CSS value of the transition with your JS code. Consider doing the animation completely in javascript with .animate . I know it's less CSS3y but it would work bullet proof.