CODEWITHSUNDEEP
jquery
kirtan403
kirtan403

Reputation: 7411

Stop the animation of jquery on mouseleave and get back to its original

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.

Upvotes: 0

Views: 1246

Answers (1)

Christian
Christian

Reputation: 19740

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/

Upvotes: 2

Related Questions