CODEWITHSUNDEEP
jqueryhtmlbackground-colorfadenav
user3218008
user3218008

Reputation: 113

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)

Upvotes: 2

Views: 934

Answers (4)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

use this code in your css

.nav{
    transition-duration: 2s;
}

DEMO

Upvotes: 1

ethorn10
ethorn10

Reputation: 1899

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)

Upvotes: 1

Bran
Bran

Reputation: 31

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

Upvotes: 1

DripDrop
DripDrop

Reputation: 1002

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.

Upvotes: 1

Related Questions