使用$（window）.scrollTop（）;构建动态jQuery菜单;

Question

我是jQuery的新手，但我正在努力设置，以便当您向下滚过页面顶部的全局导航时，会从侧面弹出一个带有相同链接的较小菜单。这是我正在使用的代码：

<script>
    $(document).ready(function(){
        $(window).scroll(function(){
            var a = $(window).scrollTop();
            if (a >= 150){
                $('#sideNav a:eq(1)').animate({'margin-right': '0', 'opacity': '1'}, 500);
                $('#sideNav a:eq(2)').delay(100).animate({'margin-right': '0', 'opacity': '1'}, 500);
                $('#sideNav a:eq(3)').delay(200).animate({'margin-right': '0', 'opacity': '1'}, 500);
                $('#sideNav a:eq(4)').delay(300).animate({'margin-right': '0', 'opacity': '1'}, 500);
            } else if (a < 150){
                $('#sideNav a:eq(4)').animate({'margin-right': '150', 'opacity': '0'}, 500);
                $('#sideNav a:eq(3)').delay(100).animate({'margin-right': '150', 'opacity': '0'}, 500);
                $('#sideNav a:eq(2)').delay(200).animate({'margin-right': '150', 'opacity': '0'}, 500);
                $('#sideNav a:eq(1)').delay(300).animate({'margin-right': '150', 'opacity': '0'}, 500);
           }
        });
    });
</script>

第一个if语句工作正常，动画可以正常工作，但是当你滚动回到顶部时，如果要使其消失，则添加其他内容似乎会破坏它。动画仍然可以工作，但是在页面滚动到适当的位置并且它们看起来更慢和波涛汹涌之后几秒钟它们就不会激活。我认为问题是我需要检查以查看菜单处于什么状态，然后停止动画，如果它已经处于该状态但我不知道如何去做。

Answer 1

正如你在帖子中所说，问题是你一遍又一遍地动画元素。您可以通过添加在动画之前检查的变量并在动画之后重置（在animate()的回调参数内）来解决此问题：

$(document).ready(function(){
    var animating = false;
    $(window).scroll(function(){
        var a = $(window).scrollTop();
        if (a >= 150 && !animating){
            animating = true;
            $('#sideNav a:eq(1)').animate({'margin-right': '0', 'opacity': '1'}, 500);
            $('#sideNav a:eq(2)').delay(100).animate({'margin-right': '0', 'opacity': '1'}, 500);
            $('#sideNav a:eq(3)').delay(200).animate({'margin-right': '0', 'opacity': '1'}, 500);
            $('#sideNav a:eq(4)').delay(300).animate({'margin-right': '0', 'opacity': '1'}, 500, 
                 /* Called after animation has completed: */
                 function() { animating = false; });
        } else if (a < 150 && !animating){
            animating = true;
            $('#sideNav a:eq(4)').animate({'margin-right': '150', 'opacity': '0'}, 500);
            $('#sideNav a:eq(3)').delay(100).animate({'margin-right': '150', 'opacity': '0'}, 500);
            $('#sideNav a:eq(2)').delay(200).animate({'margin-right': '150', 'opacity': '0'}, 500);
            $('#sideNav a:eq(1)').delay(300).animate({'margin-right': '150', 'opacity': '0'}, 500, 
                function() { animating = false; });
       }
    });
});