Class Fader Documentation and Demo

The Class Fader script takes an element and clones it and then fades back and forth between an on class name and off class name on the mouse hover event.

Class Fader Documentation

First add your HTML code for whatever you're wanting to use this effect on.

<body>
...
<ul id="my-fader">
	<li class="home"><a href="javascript:void(0);">Home</a></li>
	<li class="about"><a href="javascript:void(0);">About</a></li>
	<li class="contact"><a href="javascript:void(0);">Contact</a></li>
</ul>
...
</body>

Next you need to style your on and off classes.

<head>
	...
	<style type="text/css" media="screen">
	ul#my-fader, ul#my-fader li {
		margin: 0;
		padding: 0;
	} 
	#my-fader {
		display: block;
		width: 464px;
		height: 39px;
		background: url('./img/ui/example-menu.png') no-repeat;
	}
	#my-fader li {
		position: relative;
		display: block;
		float: left;
		height: 39px;
	}
	#my-fader li a {
		display: block;
		height: 39px;
		text-indent: -10000px;
		background: url('./img/ui/example-menu.png') no-repeat;
	}
	#my-fader li.home, #my-fader li.home a, #my-fader li.home a.off {
		width: 112px;
		background-position: 0px 0px;
	}
	#my-fader li.home a.on {
		width: 112px;
		background-position: 0px -39px;
	}
	#my-fader li.about, #my-fader li.about a, #my-fader li.about a.off {
		width: 105px;
		background-position: -112px 0px;
	}
	#my-fader li.about a.on {
		background-position: -112px -39px;
	}
	#my-fader li.contact, #my-fader li.contact a, #my-fader li.contact a.off {
		width: 147px;
		background-position: -217px 0px;
	}
	#my-fader li.contact a.on {
		background-position: -217px -39px;
	}
	</style>
	...
</head>

Finally include the required javascript libraries and start your class fader.

<head>
	...
	<script src="../eui/js/jquery/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../eui/js/ui/jquery.class-fader.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			$('#my-fader a').class_fader();
		});
	</script>
	...
</head>

Class Fader Demo

Know Issue: I know the shadow doubles up and looks darker.