鼠标滚轮绑定上的JQuery animate(）

JQuery animate() on mousewheel bind

本文关键字：JQuery animate 绑定 鼠标      更新时间：2023-09-26

我不明白我做错了什么。这非常好：

$('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'});
        }
    });
相关文章：