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>

使用jQuery淡入淡出错误

2 个答案: