javascript - 使用 Javascript 滚动时导航栏淡入淡出动画

Question

mainMenu 是一个大的导航栏，在向下滚动时变得不可见，并被 topMenu 所取代，topMenu 是一个顶部固定的小导航栏。

我有一个问题:只有当顶部菜单出现时，替换才会呈现淡入淡出动画。如何使顶部菜单在消失时也具有淡入淡出动画？

这是我的 JavaScript:

<script>
        var mainMenuTop = $('#mainMenu').offset().top;
        var mainMenuBottom = mainMenuTop + 200; 
        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop(); 

            if (scrollTop > mainMenuBottom) {

                if (($("#topMenu").is(":visible") === false)) {

                  $('#topMenu').fadeIn('slow');
                }
            } else {

                if ( $("#topMenu").is(":visible") ) {
                    $('#topMenu').hide();
                }
            }
        });
    </script>

Answer 1

我认为你要找的东西很简单。而不是这一行:

$('#topMenu').hide();

将其更改为:

$('#topMenu').fadeOut('slow');

一个漂亮简单的 jQuery 动画。请参阅http://api.jquery.com/fadeout/了解更多详情。

希望有帮助。