JQuery выйти из анимации перед началом новой анимации

Question

у меня есть:

$('.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);
});

Когда я покидаю класс '.p_m' быстрее, чем 10000 мс, анимация мышиного центра продолжает работать, даже если я покидаю класс div.

Как я могу пропустить анимацию (мышиный центр) или лучше сделать ее быстрой, чтобы она соответствовала 10000 мс.

Answer 1

Используйте .stop(), чтобы остановить текущую анимацию.

$('.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);
});

Если вы хотите, чтобы анимация пропускалась до конца перед запуском новой, передайте true в качествеВторой аргумент..stop(true,true)