CODEWITHSUNDEEP
jqueryanimation
Krueger
Krueger

Reputation: 1228

jQuery quit animation before starting a new animation

I have: 

$('.p_m').mouseenter(function () {

    $(this).animate({
        marginTop: '10px',
        marginLeft: '10px',
        height: '150px',
        width: '150px'
    }, 10000);

}).mouseleave(function () {

    $(this).animate({
        marginTop: '35px',
        marginLeft: '35px',
        height: '100px',
        width: '100px'
    }, 10000);
});

When I leave the class '.p_m' quicker than 10000ms, the mouseenter animation keeps going even if I leave the div class.

How can I skip the animation (mouseenter) or better make it fast so it fits to 10000ms.

Upvotes: 1

Views: 325

Answers (1)

user1106925
user1106925

Reputation:

Use .stop() to halt the current animation.

$('.p_m').mouseenter(function () {

    $(this).stop().animate({
        marginTop: '10px',
        marginLeft: '10px',
        height: '150px',
        width: '150px'
    }, 10000);

}).mouseleave(function () {

    $(this).stop().animate({
        marginTop: '35px',
        marginLeft: '35px',
        height: '100px',
        width: '100px'
    }, 10000);
});

If you want the animation to skip to the end before starting the new one, pass true as the second argument. .stop(true,true)

Upvotes: 3

Related Questions