ScriptBreaker

At the moment of writing this script the JQuery core library doesn't support background color fading. If you want to use background fading you need to use the JQuery color plugin. This script demonstrates how to use JQuery with the color plugin to fade the background color of menu buttons.

HTML, CCS and JQuery code

	
	
	
	<script type="text/javascript" src="jquery-1.5.2.min.js">
	<script type="text/javascript" src="jquery.color-1.4.js">
	
	<script type="text/javascript">
	$(function() {
	    // on mouse over
	    $("ul#nav li").hover(function () {
	        if(!$(this).parent().hasClass("selected")){
	            $(this).animate({
	            	backgroundColor: '#A3D6F5'
	            }, 'fast');
	        }
	    },
	    // on mouse out
	    function () {
	        // animate backgroundColor to nill
	        color = $("div#wrapper").css("background-color");
	        $(this).stop().animate({
	        	backgroundColor: color
	        }, 'fast');
	    });
	});
	


	

		

			
Homewelcome
			
Tutorialswant to learn
			
Articlesget informed
			
Contactask it!
		
	

 Download full sourcecode