Demo 5 :: Color

JQuery animations are cool and all but if you tried to change color with jQuery, you might have noticed that it didn't work. In jQuery's core bundle, it only provides simple animations and no support for color changing. Changing colors is a bit more complicated than calculating positions of an object. JQuery has to account for all the colors in between the ones you are transitioning from. You can download the jQueryUI for color transitioning from http://jqueryui.com/download.

View the HTML code

<div id="nav">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div>

View the jQuery code

$(document).ready(function(){
	$('#nav li').hover(function(){
		$(this).stop(true).animate({'backgroundColor': '#399'}, 1000);
	}, function(){
		$(this).stop(true).animate({'backgroundColor': '#09F'}, 1000);
	});
});