jquery动画导航颜色 [英] Jquery animate navigation color

问题描述

您好，我现在正在制作一个网站，并且在动画导航栏时遇到问题。

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

如何让它淡入背景色？

HTML

 < div class =nav> 
< div class =container> 
< div class =logo> 
< a href =＃>< img src =RepublicSquare_logo.svgstyle =height：80px;>< / a> 
< / div> 
< div class =navMain> 
< ul> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>关于< / a>< / li> 
< li>< a href =＃>服务< / a>< / li> 
< li>< a href =＃>投资组合< / a>< / li> 
< li>< a href =＃>联络人< / a>< / li> 
< / ul> 
< / div> 
  

Jquery

 < script> 
 $ b $（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> 
  

感谢您花时间回答问题。
（我希望这个问题很明确，如果不能让我知道的话）

解决方案

在你的css中使用这段代码

  .nav {
 transition-duration：2s; 
} 
  

DEMO

Hi I am making a website at the moment and am I having trouble with animating the navigation bar.

I would like the navigation bar to be transparent originally, than for it to change background-color after a certain div. I have done this but want the background-color to fade in, not just appear. Below is the HTML and Jquery.

How do I make it fade to the background-color?

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>

Thanks for taking the time to answer the question. (I hope the question is clear, if not let me know)

解决方案

use this code in your css

.nav{
    transition-duration: 2s;
}

DEMO

这篇关于jquery动画导航颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！