How to Fade Images on MouseOver with jQuery Javascript
Posted on Jan 23, 2010 in Articles
First post back in a couple of months – hopefully things will pick up again from here I’ve also enabled comments for anyone who has questions or clarifications now.
As far as visual aesthetics go, fading images has always been a pleasant and smoother experience for many users. Using jQuery, it’s actually very simple and easy to get that smooth fading effect on hovers. This is useful for making images change from grayscale to color or vice versa, and an assortment of other purposes.
You can find an example of this effect on my work-in-progress site CameoFX.com.
There are essentially two methods that are quite simple. The first fades 2 different images, while the second fades the image away and shows the background from the div holding the image. I personally like first more as it is simpler to use with multiple images and works more nicely with positioning.
Fading to a div with a background (recommended)
First of all, you’ll need jQuery. You can download it from jQuery.com or download the latest minified version, 1.4, here (use right click -> save target as).
Then you will need to add these lines for your classes to your css. The tag of start and end can be substituted for whatever you would like to class your image as, such as first or before, etc.
The class fadehover is what I use to show where the images will be faded from, and sets the positioning with the background image, what will be faded to. This also works with multiple images if you have a div background that spans behind all of them.
position: relative;
background:url(background.jpg);
}
img.start {
position: relative;
left: 0;
top: 0;
z-index: 10;
}
Now, the code you’ll need to insert into the header of the pages you want to include the fade on. So unless you use a common page template for part of the site, you’ll want to add these between the <head> and </head> tags of your page.
<script type=’text/javascript’ src=’jQuery.js’></script>
This includes the jQuery source file so you can use it in your page. This snippet assumes that the jQuery.js is in the same directory as the page referencing it, so fix links accordingly.
Remember to put the following code inside of <script> and </script> tags as well.
$("img.first").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "medium");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
What this script will do for you is fade out the image and just show the div background behind it.
The opacity of the image can be changed with the numbers as well – 0 being the start opacity and 1 being the end opacity. It can be manipulated to be half-shown (0.5) etc.
Once the mouse is removed, it will return to the start image. This script uses medium as a speed for fade out (going to the second image) and slow for the fade back in (returning to the pre-hover image). You can change these to slow, medium, or fast.
Getting the Fade Effect with 2 different images
Like the first method, you’ll need jQuery. You can download it from jQuery.com or download the latest minified version, 1.4, here (use right click -> save target as).
Then you will need to add these lines for your classes to your css. The tags of start and end can be substituted for whatever you would like to class your image as, such as first & last, etc.
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.end {
position: absolute;
left: 0;
top: 0;
}
Now, the code you’ll need to insert into the header of the pages you want to include the fade on. So unless you use a common page template for part of the site, you’ll want to add these between the <head> and </head> tags of your page.
<script type=’text/javascript’ src=’jQuery.js’></script>
This includes the jQuery source file so you can use it in your page. This snippet assumes that the jQuery.js is in the same directory as the page referencing it, so fix links accordingly.
Remember to put the following code inside of <script> and </script> tags as well.
$("img.first").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "medium");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
What this script will do for you is swap the first image with the second image, notice that the first is under the class start, as it is what starts before the hover, and end is for what the image ends up as with the hover.
The opacity of the image can be changed with the numbers as well – 0 being the start opacity and 1 being the end opacity. It can be manipulated to be half-shown (0.5) etc.
Once the mouse is removed, it will replace the second image to its full opacity . This script uses medium as a speed for fade out (going to the second image) and slow for the fade back in (returning to the pre-hover image). You can change these to slow, medium, or fast.
Like this post?
Subscribe for more:
|
|
 @stephenkui | Latest Tweet
|