Question

I am trying to scale to 2.5 when hovering to the div. When hovering it starts the animation and on mouse out it gets to its original one. But the problem is when you hover to the element and quickly remove the cursor from the div the whole two animation completes. Like it fully scale to 2.5 and then get back to 1. I want if I mouseout in between it’s animating it should stop where it is in the position and return to scale 1. But unable to do so.

I am using jquery.transit

jsfiddle : http://jsfiddle.net/2swqN/3/

the jquery is:

$(".zoomable").live({
mouseover: function() {
    console.log("hoverd");
    $(this).transition({
        //rotateY: '360deg',
        scale: 2.5,
    },2000);
},
mouseout: function() {
    console.log("hovered out");

    $(this).transition({
        //rotateY: '0deg',
        scale: 1,
    },2000);

}
});​

using the stop() also doesn’t seem to work good because it flashes sometime.

Answer 1

Considering that you’re not using the fallback, all that plugin does is create CSS3 transforms. You can do that yourself without the need for a plugin, or any javascript at all for that matter.

.zoomable {
    ...
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.zoomable:hover {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
}

jsFiddle: http://jsfiddle.net/2swqN/14/

EDIT to address your issues with CSS transitions:

To execute code after the animation completes, you can use the transitionEnd event.

$('.zoomable').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function() {
    alert('Transition Complete');
});

Demo: http://jsfiddle.net/2swqN/16/

To start animation on click, use jQuery’s toggleClass(), and put the transforms in a separate class.

$('.zoomable').on('click', function() {
    $(this).toggleClass('active');
});

.zoomable.active {
    /* css transforms here */
}

Demo: http://jsfiddle.net/2swqN/17/