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 类，mouseenter 动画也会继续运行。

如何跳过动画(鼠标输入)或更好地使其快速以适合 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)