Stop the animation of jquery on mouseleave and get back to its original
<p>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.</p>

<p>I am using <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">jquery.transit</a></p>

<p>jsfiddle : <a href="http://jsfiddle.net/2swqN/3/" rel="nofollow">http://jsfiddle.net/2swqN/3/</a></p>

<p>the jquery is:</p>

<pre><code>$(".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);

}
});​
</code></pre>

<p>using the <code>stop()</code> also doesn't seem to work good because it flashes sometime.</p>
