如何让导航栏淡入淡出

Question

我想做一个导航栏，当用户向下滚动页面导航栏变得半透明，然后如果用户鼠标悬停在导航栏上它会重复，然后再次出去，一旦他们将鼠标从物体上移开。我似乎无法解决如何：

获取导航栏只在用户向下滚动页面后鼠标离开后淡入淡出 - 我不希望它们在屏幕顶部褪色在他们将鼠标移开之后，只有在页面进一步向下时。 这样做，如果它们在移动鼠标时缓慢淡出，而不是直接进入设置的不透明状态。

$(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); 
       }); 

    }) 

Answer 1

$(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() { 
     if($(window).scrollTop() > 75) { // this here 
      $(this).css("opacity", 0.3); 
     } 
    }); 

}) 

运作的？

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

#navBar { 
    transition: opacity 2s; 
} 

这样，每次你改变的不透明度为元素#navBar时间，不透明度的变化应该需要2秒。