Deny jQuery events during an animation

Question

on hover, i want to animate an div. During the animation i want to disable the hover possibility to avoid the animation call, several times. I removed the mouseenter event with "unbind". Once the animation is finished the mouseenter event shoult be added again. Bud i'm not able to get this work.

Here the 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');
    }
});

Thanks alot.

Answer 1

Try .stop()

Stop the currently-running animation on the matched elements.

Your code becomes

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