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滑动导航性能问题

1 个答案: