jquery动画导航颜色

嗨，我正在制作一个网站，我在动画导航栏时遇到问题。jquery动画导航颜色

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

如何让它淡入背景色？

HTML

<div class="nav"> 
     <div class="container"> 
     <div class="logo"> 
     <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a> 
     </div> 
     <div class="navMain"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div>

jQuery的

<script> 

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

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

来源

2014-12-05 user3218008

莫非你做了一个jsfiddle？ => [JSFIDDLE]（http://www.jsfiddle.net） – 2014-12-05 02:13:31

@Godisgood当然，我会做到这一点。 – user3218008 2014-12-05 02:17:58

@ user3218008所以这里的一切都准确地改变'background-color'，但是你想要从透明转换到'rgba（34,34,34,0.9）'来淡入？ – ethorn10 2014-12-05 03:09:34

使用这种代码在你的CSS

.nav{ 
    transition-duration: 2s; 
}

DEMO

来源

2014-12-05 02:25:21

对不起，没有工作 – user3218008 2014-12-05 02:32:37

其中＃c标题在你的html代码？ – 2014-12-05 02:40:08

这只是它会触发改变颜色的标题元素。 – user3218008 2014-12-05 02:43:14

<script> 

    $(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').animate({background-color: rgba(34,34,34,0.9)}, 1000); 
     } else { 
      $('.nav').css('background-color', 'transparent'); 
     } 
    }); 
}); 
</script>

来源

2014-12-05 02:12:22 Bran

对不起，没有工作。 – user3218008 2014-12-05 02:32:16

也许现在尝试...没有qoute – Bran 2014-12-05 03:08:30

没有没有工作。你知道我可以使用的其他选项吗？ – user3218008 2014-12-05 03:14:36

尝试在animate()功能使用jQuery的构建。像这样：

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

这会褪色而不是只是改变它。

来源

2014-12-05 02:18:09 DripDrop

我试过了，但没有奏效。你的意思是这样的：$（document）。（）函数（）{ 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'）。animate（{“color”：“red”}，500）; }其他{ $ （'.nav'）.css（'background-color'，'transparent'）; } }）; }）; – user3218008 2014-12-05 02:25:48

是的，这将确保网站在发生任何事情之前完全加载。 – DripDrop 2014-12-05 02:30:23

jQuery的fadeIn()不适用于这类用途。它会淡化匹配的元素，而不是特定的属性。正如其他人所说，你可以使用animate()，但是从documentation，你会看到background-color不是属性之一，除非插件使用：

所有动画属性应该动画到一个单一的数值，除了下面指出的;那些非数字不能使用基本jQuery的功能性来动画大多数属性（例如，宽度，高度，或左可以是动画，但背景颜色不能，除非使用 jQuery.Color()插件）

来源

2014-12-05 03:21:31 ethorn10

jquery动画导航颜色

回答

相关问题