Javascript 鼠标滚轮绑定上的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"});
        }
    });

$（'body'）.bind（'mousewheel'，函数（e）{
如果（e.originalEvent.wheelDelta<0）{
//向下滚动
//console.log（'Down'）；
$（“.spacer\u top\u panel”）.css（{“height”：“90px”}）；
$（“.spacer\u top\u panel nav”）.css（{“margin”：“15px auto”}）；
}否则{
//向上滚动
//console.log（'Up'）；
$（“.spacer\u top\u panel”）.css（{“height”：“140px”}）；
$（“.spacer\u top\u 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'});
        }
    });

$（'body'）.bind（'mousewheel'，函数（e）{
如果（e.originalEvent.wheelDelta<0）{
//向下滚动
//console.log（'Down'）；
$（“.spacer\u top\u panel”）.animate（{height:'90px'）；
$（“.spacer\u top\u panel nav”）.animate（{margin:'15px auto'}）；
}否则{
//向上滚动
//console.log（'Up'）；
$（“.spacer\u top\u panel”）.animate（{height:'140px'）；
$（“.spacer\u top\u 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'});
        }
    });

$（'body'）.bind（'mousewheel'，函数（e）{
如果（e.originalEvent.wheelDelta<0）{
//向下滚动
//console.log（'Down'）；
$（“.spacer\u top\u panel”）.stop（）.animate（{height:'90px'）；
$（“.spacer\u top\u panel nav”）.stop（）.animate（{margin:'15px auto'}）；
}否则{
//向上滚动
//console.log（'Up'）；
$（“.spacer\u top\u panel”）.stop（）.animate（{height:'140px'）；
$（“.spacer\u top\u panel nav”）.stop（）.animate（{margin:'45px auto'}）；
}
});

不需要，动画不需要：动画实际上是用于向上滚动的，但它只是需要一些时间才能启动。