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

Question

我不知道我做错了什么。这工作得很好:

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

知道我在这里做错了什么吗？我想问题很明显，但我看不到。感谢帮助。

Answer 1

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