Question

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.

Answer 1

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)