Jquery animate navigation color

问题

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)

回答1:

use this code in your css

.nav{
    transition-duration: 2s;
}

DEMO

回答2:

Try using JQuery's build in animate() function. Like so:

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

This will fade the color rather than just change it.

回答3:

<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>

回答4:

jQuery's fadeIn() is not intended for this type of use. It fades in matching elements, not specific properties. As others have mentioned, you could use animate(), but from the documentation, you'll see that background-color is not one of the properties unless a plugin is used:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used)

来源：https://stackoverflow.com/questions/27307633/jquery-animate-navigation-color

标签

jquery

html

background-color

fade

nav