Jquery动画导航颜色

嗨，我现在正在制作一个网站，我在动画导航栏时遇到了麻烦。

我希望导航栏最初是透明的，而不是在某个div之后更改背景颜色。 我已经这样做了，但希望背景颜色淡入，而不仅仅是出现。 下面是HTML和Jquery。

如何让它淡入背景色？

HTML

 
 
  
 
 
 
Home
 
About
 
Services
 
Portfolio
 
Contact
 
  

jQuery的

  $(document).ready(function(){ var scroll_start = 0; var startchange = $('#c-title'); var offset = startchange.offset(); $(document).scroll(function() { scroll_start = $(this).scrollTop(); if(scroll_start > offset.top) { $('.nav').css('background-color', 'rgba(34,34,34,0.9)'); } else { $('.nav').css('background-color', 'transparent'); } }); });  

感谢您抽出宝贵时间回答这个问题。 （我希望问题很清楚，如果不让我知道）

Answer 1

在你的CSS中使用此代码

 .nav{ transition-duration: 2s; } 

DEMO

Answer 2

尝试在animate()函数中使用JQuery的构建。 像这样：

 $('yourDiv').animate({"color" : "red"},500); 

这会淡化颜色，而不仅仅是改变颜色。

Answer 3

Answer 4

jQuery的fadeIn()不适用于此类用途。 它淡化匹配元素，而不是特定属性。 正如其他人所提到的，您可以使用animate() ，但是从文档中 ，除非使用插件，否则您将看到background-color不是其中一个属性：

除非如下所述，否则应将所有动画属性设置为单个数值。 大多数非数字属性无法使用基本jQueryfunction进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color（）插件）