Description
In a nutshell, this script first sets the opacity of the images in the container to 0.5. It then changes the opacity to 1 as you hover a particular image, and then back to .5 as you hover away from the image.
View the source for more in depth comments on each line of code.
Demo:
The Code:
HTML
<div id="container">
<img src="/wp-content/themes/simplebeginnings/images/jquery/1.jpg" alt="image" />
<img src="/wp-content/themes/simplebeginnings/images/jquery/2.jpg" alt="image" />
<img src="/wp-content/themes/simplebeginnings/images/jquery/3.jpg" alt="image" />
<img src="/wp-content/themes/simplebeginnings/images/jquery/4.jpg" alt="image" />
<img src="/wp-content/themes/simplebeginnings/images/jquery/5.jpg" alt="image" />
</div>
jQuery
<script type="text/javascript">
$(function() {
$('#container img').animate({"opacity": .5 }); // get all images within the container div and animate them and set the opacity to 0.5. (Note: you could use. css instead of .animate, but it seems that .animate is more consistent across browsers)
$('#container img').hover(function() { // next, we are getting all images in the container div and running a function when we hover them.
$(this).stop().animate({ "opacity": 1 }); // this changes the opacity of the image to 1 when you hover over it. The .stop method runs a check to see if there is any animate function currently running and stops it and immediately sets the opacity to 1. This way if you were to mouse in and out of an image real fast (faster than the script can keep up with) it won't keep animating between .5 and 1 after you un-hover.
}, function() { // this runs a second function on the images in container when we un-hover
$(this).stop().animate({ "opacity": .5 }); // this just sets the opacity back to .5 when we hover off the image. (The stop does the same thing as noted above.)
});
});
</script>
