Javascript jQuery的淡入淡出bug

在我的页面上，当用户说向下滚动1000像素时，我的导航会消失，当我向上滚动时，导航会消失。我使用下面的方法，效果非常好

// Fade Navigation

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

---

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

如果你将

true

作为第二个参数传递给

.stop（）

，它将停止动画并将元素跳转到动画实际完成时应该处于的状态

i、 e.如果在元素淡出时调用

$（'nav ul'）.stop（true，true）.fadeIn（500）

，则在开始

.fadeIn（）

动画之前，它将停止淡出，并使其跳转到其逻辑端（完全淡出）

使用该功能，您应该能够通过以下操作而不是上面的代码块：

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

---

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

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

<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>

一个
两个

//在onscroll处理程序之外执行此操作。昂斯克罗尔经常被解雇，
//因此，如果您必须创建jq实例，那么性能将会降低
//或者多次浏览dom
变量$wnd=$（窗口）；
var$nav=$（'nav.main'）；
//添加此项以阻止主处理程序执行
//当我们淡入淡出…在尝试中
//平滑动画的步骤
var blockHandler=false；
window.onscroll=函数（）{
如果（！blockHandler）{
blockHandler=true；
//我这里用了50，但是计算你导航的偏移量
//再加上它的高度。或者，也许只有一半的高度
//高度，以便可以看到动画。
如果（$wnd.scrollTop（）<50）{
$nav.fadeIn（500，功能（）{
blockHandler=false；
});
}否则{
$nav.fadeOut（500，功能（）{
blockHandler=false；
});
}
}
};

什么浏览器？你能做一个演示给我们看吗？我不认为

：visible

是这样工作的---即使元素被滚动到视图之外，如果它们仍然占据文档中的空间，它们也被认为是

：visible

。另外，您可能很高兴知道有一个

.fadeToggle（）

函数！jQuery确切地知道元素是否可见。问题是，

.stop（）

激活一个

淡出

动画会使元素部分可见，这被认为是

：可见

。对不起，伙计，我不是有意冒犯你，但我认为利亚姆在让菜单平稳淡入淡出方面遇到了麻烦，因此我发布了一些“我一直在玩”的东西，这很可能会让他对如何实现自己想要的东西有新的想法。一般来说，答案都会伴随着代码进行解释，特别是当代码中有太多内容似乎无关紧要时。这是jQuery，不需要测试浏览器。。。这就是使用它的意义所在。这次我的解释是以代码中注释的形式进行的。getScrollOffsets函数是我在库中使用的，所以我复制了它。我已经编辑了代码并改用了$.scrollTop。