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

Question

我在我的网站上编写了一个小 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，然后连续几次回到顶部），当他们停止时，菜单将继续淡出和淡入，直到完成用户所做的循环次数。一旦用户停止滚动，如何添加代码以取消淡出/淡入。

任何帮助表示赞赏:)

Answer 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");
        }
    }); 
});