javascript - 在动画期间拒绝 jQuery 事件

Question

悬停时，我想为一个 div 设置动画。在动画期间，我想多次禁用悬停的可能性以避免动画调用。我用 unbind 删除了 mouseenter 事件。动画完成后，应该再次添加 mouseenter 事件，但我无法完成这项工作。

这是 jQuery:

items.hover(function (e) {
    $(e.currentTarget).unbind('mouseenter');
    if ($(this).hasClass('xy')) {
        $('div.block', this).addClass('xxx').removeClass('zzz').animate({
            top: '0'
        });
    }
}, function (e) {
    if ($(this).hasClass('xy')) {
        $('div.block', this).animate({
            top: topHeightVal
        }, 200, function () {
            $(e.currentTarget).bind('mouseenter');
        }).addClass('zzz').removeClass('xxx');
    }
});

Answer 1

尝试 .stop()

Stop the currently-running animation on the matched elements.

你的代码变成

items.hover(function (e) {
    $(e.currentTarget).unbind('mouseenter');
    if ($(this).hasClass('xy')) {
        $('div.block', this).addClass('xxx').removeClass('zzz').stop(true, true).animate({
            top: '0'
        });
    }
}, function (e) {
    if ($(this).hasClass('xy')) {
        $('div.block', this).stop(true, true).animate({
            top: topHeightVal
        }, 200).addClass('zzz').removeClass('xxx');
    }
});