javascript - 鼠标滚轮绑定(bind)上的jQuery animate()

我无法弄清楚我在做什么错。这工作得很好：

$('body').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            //scroll down
            //console.log('Down');
            $(".spacer_top_panel").css({"height": "90px"});
            $(".spacer_top_panel nav").css({"margin": "15px auto"});
        } else {
            //scroll up
            //console.log('Up');
            $(".spacer_top_panel").css({"height": "140px"});
            $(".spacer_top_panel nav").css({"margin": "45px auto"});
        }
    });

但是，当我将.css更改为.animate时，它将仅在向下滚动时起作用，而在再次向上滚动时该对象将不进行动画处理。

$('body').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            //scroll down
            //console.log('Down');
            $(".spacer_top_panel").animate({height:'90px'});
            $(".spacer_top_panel nav").animate({margin:'15px auto'});
        } else {
            //scroll up
            //console.log('Up');
            $(".spacer_top_panel").animate({height:'140px'});
            $(".spacer_top_panel nav").animate({margin:'45px auto'});
        }
    });

有什么想法我在这里做错了吗？我想问题很明显，但我看不到。
帮助表示赞赏。

最佳答案

使用stop();中断一个动画并切换到另一个动画

$('body').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            //scroll down
            //console.log('Down');
            $(".spacer_top_panel").stop().animate({height:'90px'});
            $(".spacer_top_panel nav").stop().animate({margin:'15px auto'});
        } else {
            //scroll up
            //console.log('Up');
            $(".spacer_top_panel").stop().animate({height:'140px'});
            $(".spacer_top_panel nav").stop().animate({margin:'45px auto'});
        }
    });