javascript - jQuery 的淡入淡出错误

Question

在我的页面上，当用户说 1000 像素向下滚动页面时，我的导航淡出，当我向上滚动时，导航淡入。我使用以下完美工作...

// Fade Navigation

if(!$('nav ul').is(':visible')) {
    $('nav ul').stop().fadeIn(500);
} else {
    $('nav ul').stop().fadeOut(500);
}

我唯一的问题是，如果你滚动得非常快，动画不知道它是否可见，有没有办法阻止它？

Answer 1

如果您true作为第二个参数传入.stop()，它将停止动画并将元素跳转到动画实际完成时应该处于的状态。

即，如果您$('nav ul').stop(true, true).fadeIn(500)在元素淡出时调用，它将停止淡出，并使其在开始动画之前跳转到其逻辑结束（完全淡出） 。.fadeIn()

使用它，您应该能够摆脱以下代码块而不是上面的代码块：

$('nav ul').stop(true, true).fadeToggle(500);

虽然它看起来有点生涩，但你可以用更复杂的逻辑来解决它。

Answer 2

我一直在玩这个。请参阅代码中的注释。

<nav class="main">
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</nav>

<script type="text/javascript">

    // Do this outside of the onscroll handler.  onscroll is fired a lot,
    // so performance will slow if you're having to create jq instances
    // or navigate the dom several times
    var $wnd = $(window);
    var $nav = $('nav.main');

    // Added this to block the main handler from executing
    // while we are fading in or out...in attempt
    // to smooth the animation
    var blockHandler = false;

    window.onscroll = function () {
        if (!blockHandler) {
            blockHandler = true;

            // I've used 50 here, but calc the offset of your nav
            // and add the height to it.  Or, maybe just half the
            // height to it so you can see the animation.
            if ($wnd.scrollTop() < 50) {
                $nav.fadeIn(500, function () {
                    blockHandler = false;
                });
            } else {
                $nav.fadeOut(500, function () {
                    blockHandler = false;
                });
            }
        }
    };

</script>