In this tutorial you will apply a fade animation to an image when the mouse hovers over it.
You should have something looking like this.
You then need the jQuery code that will make the image fade to 0.4 opacity when the mouse rolls over, and return back to full opacity when the mouse rolls out.. Place the code in the <HEAD> section.
Tip! - You could put the code in a .js include file, so it is accessible from all your webpages.
<script>
$(document).ready(function() {
// make sure the image is at full opacity on load
$(".fade").css("opacity", "1.0");
// Change speed/opactity of mouseover state
$('.fade').mouseover(function() {
$(this).stop().fadeTo(400, 0.4);
});
// Change speed/opactity of mouseout state
$('.fade').mouseout(function() {
$(this).stop().fadeTo(500, 1.0);
});
});
</script>
To apply the fade effect you need to add the classname "fade" to the image e.g.
<a href="http://www.yahoo.com"><img src="/image.jpg" class="fade" /></a>
And here is the full code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQueryHover Fade</title>
<script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// make sure the image is at full opacity on load
$(".fade").css("opacity", "1.0");
// Change speed/opactity of mouseover state
$('.fade').mouseover(function() {
$(this).stop().fadeTo(400, 0.4);
});
// Change speed/opactity of mouseout state
$('.fade').mouseout(function() {
$(this).stop().fadeTo(500, 1.40);
});
});
</script>
</head>
<body>
<a href="http://www.yahoo.com"><img src="/image.jpg" class="fade" /></a>
</body>
</html>
Demo