Javascript 如何使导航栏淡入淡出

我试图制作一个导航栏，当用户向下滚动页面时，导航栏变为半透明，然后如果用户鼠标悬停在导航栏上，它会重复，然后在他们将鼠标移离对象后再次熄灭。我似乎不知道如何：

当用户向下滚动页面时，让导航栏仅在鼠标离开后淡出-我不希望当他们在屏幕顶部移动鼠标离开导航栏时，导航栏仅在他们在页面的较低位置时淡出。 使其在移动鼠标时缓慢淡出，而不是直接转到“设置不透明度”

$(window).scroll(function() {
    if ($(window).scrollTop() > 75) {
        $('#navBar').css("opacity", 0.3);
    }
    else {
        $('#navBar').css("opacity", 1);
    }
});

    $(document).ready(function(){
        $('#navBar').live("mouseover", function () {
                $(this).css("opacity", 1);
                });

        $('#navBar').live("mouseleave", function () {
                $(this).css("opacity", 0.3);
                });

    })

这样行吗

您可以将其添加到CSS中，使其逐渐淡入/淡出：

#navBar {
  transition: opacity 2s;
}

---

这样，每次更改元素#导航栏的不透明度时，不透明度更改应该需要2秒钟。

请设置一个非常有效的Yep，谢谢。我曾经尝试过使用那一行额外的代码，但因为我对JavaScript非常陌生，所以不知道该把它放在哪里。你知道如何使它慢慢淡出吗？你可以做$（this）.fadeOut（“slow”）而不是用.css（）改变不透明度，但是我认为.fadeOut（）会使元素完全透明，所以如果你想让元素保持可见，我不会用它。编辑了我的答案。CSS方法应该有效。

#navBar {
  transition: opacity 2s;
}