jquery - 使用 $(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 语句工作正常并且动画工作正常，但是添加 else 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; });
       }
    });
});