Use jquery to fade between 2 colors – Nice navigation effect.

This post will show you how to use JQuery to create a nice animated fade between two colors. It’s a really nice effect which can be utilised on any website – i find it adds a nice polished effect to a navigation menu.

Please note that this effect will only work if you are using the Jquery UI library. You can download it here.

Example:

Link to the Jquery library.

<script type="text/javascript" src="scripts/jquery-1.5.1.min.js"> </script>

<script type="text/javascript" src="scripts/jquery-ui.js"></script>

Obviously you will want to change the ‘src’ attribute so that it points to the folder in which you saved the files! Also, make sure to get the latest versions of both librarys, these are slightly outdated now.

Create a navigation list using an UL.

<ul id="navigationUL">

<li><a href="#"> Home</a></li>

<li ><a href="#"> Visit our site </a></li>

<li><a href="#"> About</a></li>

<li><a href="#"> Contact</a></li>

<li><a href="#"> Newsletter</a></li>

<li><a href="#"> Misc </a></li>

</ul>

Add some simple JQuery

<script type="text/javascript">

$(document).ready(function(){ /*When the document is ready, execute the following code*/

$("#navigationUL li a").hover(function() { /*Select the nav via the ID specified earlier. When hovered execute the following code*/

$(this).animate({ color: "#aa432f" }, 600); /*Do this when the user hovers the element, in this instance change the color in 600 ms*/

}, function() {

$(this).animate({ color: "#285a86" }, 300);  /*Do this when the user is no longer hovering the element*/

});

});

</script>

It’s probably worth mentioning the the hover() function accepts two parameters. The first is executed when the mouse pointer hovers the element, the second is executed when the mouse pointer leaves the element. Hopefully that makes the code slightly easier to understand!

The post Use jquery to fade between 2 colors – Nice navigation effect. appeared first on Weebtutorials.