JQuery 菜单栏不必要的重复动画

Posted 2023-02-16

【中文标题】JQuery 菜单栏不必要的重复动画

【英文标题】：JQuery Menu bar unnecessary repetition of animation

【发布时间】：2013-08-30 11:39:17

【问题描述】：

我在我的网站上编写了一个小 jquery 脚本来淡出菜单（称为 menew 和 menew2）。当用户位于页面顶部时，两者都存在。当用户位于底部时，仅存在第二个（底部栏）菜单。当用户位于页面的一半时，没有菜单。

/*Menu*/

$(document).ready(function()
    $(window).scroll(function()
        if($(window).scrollTop()<50)
            $('#menew').fadeIn("slow");
         else 
            $('#menew').fadeOut("slow");
        
    ); 
);

/*Menu 2*/

$(document).ready(function()
    $(window).scroll(function()
        if($(window).scrollTop() > 0 - 50 + ($(document).height() - $(window).height()))
            $('#menew2').fadeIn("slow");
         else if($(window).scrollTop()<50)
            $('#menew2').fadeIn("slow");
         else 
            $('#menew2').fadeOut("slow");
        
    );
);

这很好用，除了如果我从底部滚动到顶部，反之亦然，底部菜单（页面顶部和底部的唯一一个）将继续完全淡出，然后才能开始淡入。

如何重新编码，以便菜单停止淡出并在到达顶部/底部时开始淡入。

问题的延伸是，如果用户疯狂滚动（EG 他们向下滚动 50+px，然后连续几次回到顶部），当他们停止时，菜单将继续淡出和淡入，直到完成用户所做的循环次数。一旦用户停止滚动，如何添加代码以取消淡出/淡入。

任何帮助表示赞赏:)

【参考方案1】：

在开始任何动画之前尝试 .stop() http://api.jquery.com/stop/

$(document).ready(function()
    $(window).scroll(function()
        if($(window).scrollTop()<50)
            $('#menew').stop().fadeIn("slow");
         else 
            $('#menew').stop().fadeOut("slow");
        
    ); 
);

【讨论】：

感谢@Michael 的回复，但这似乎没有帮助。我还尝试将每个 if/else 更改为： if() $('#menew').stop(); $('#menew').fadeIn("slow");不幸的是，这两个代码都没有修复它。停止确实停止了 menew，但它也阻止了它再次消失。