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/

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

Jquery 滑动导航性能问题

Jquery sliding nav performance issue

jquery

navigation

slidingmenu

sliding