Jquery滑动导航性能问题

Question

我已经实现了一个滑动导航，它工作得非常好，直到你向下滚动。由于 $navigation_menu div 是固定的，我不得不编写一个 jquery 脚本来强制它在用户向下滚动页面并备份页面然后尝试再次使用导航时关闭，导航 jquery 真的很慢。

我希望它只是我在 jquery 中不知道的东西。

jQuery 代码

jQuery(document).ready(function($){
    var slid = false;
    var right = $("#navigation_menu").css("right");

    $("#navigation").click(function(){
        if(!slid && right == "-300px"){
            $("#navigation_menu").animate({right: '0px'});
            slid = true;
            return;
        }
        else if(slid){
            $("#navigation_menu").animate({right: '-300px'});
            slid = false;
            return;
        }
    });

    $(window).scroll(function(){
        $("#navigation_menu").animate({right: '-300px'});
        slid = false;
        $("$navigation_menu").unbind("scroll");
        return;
    });
});

只是为了澄清。当用户向下滚动时，导航关闭。导航正确打开和关闭，直到用户向下滚动。导航 HTML 和 CSS 是完全正确的。一旦用户向下滚动然后向上滚动以使用导航，它会在很长一段时间内痛苦地无响应，并且导航需要永远滑入设备的视口。

这里是代码的 jsfiddle。请记住，这是为移动设备设计的。我不知道这是否会有所不同。

http://jsfiddle.net/371fqnbo/1/

Answer 1

当我只在需要滚动时让动画完成时，对我来说非常好

if(slid){ 
....
}

并在动画之前调用.stop()。 （否则，由于滚动事件被多次触发，这些动画中的多个将被完成。这些动画最终会出现在动画队列中。只需调用动画，您就可以将动画放入此队列（并且仅在所有其他动画之后完成完成）。通过调用 stop()，您可以清空此队列，从而立即让您的动画完成）

看http://jsfiddle.net/371fqnbo/2/

但是您的代码包含一些可以消除的冗余。