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.
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>
Know Issue: I know the shadow doubles up and looks darker.