Skip to main content

Creating a Mouseover Fade Effect with jQuery


My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing.

First things first, download jQuery. Grab the Production minified version off of their site. Next, get two images. I used the following.
cbavota-bwcbavota
Add the jQuery script between your head tags.
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>
Here is the function.
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>
Here is the CSS.
<style>
 
div.fadehover {
 position: relative;
 }
 
img.a {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 10;
        }
 
img.b {
 position: absolute;
 left: 0;
 top: 0;
 }
 
</style>
And here is the body code.
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
All together you got something that looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>
<style>
div.fadehover {
 position: relative;
 }
 
img.a {
 position: absolute;
 left: 0;
 top: 0;
        z-index: 10;
 }
 
img.b {
 position: absolute;
 left: 0;
 top: 0;
 }
</style>
</head>
 
<body>
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
</body>
</html>
Test it out below:
NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

Comments

Post a Comment

Popular posts from this blog

உடல் எடையை குறைக்க வேண்டுமா ?

இன்றைய அவசர உலகின் மிக பெரிய பிரச்சனையாக இருப்பது உடல் எடை அதிகரிப்பது தான்.மனம் போன போக்கில் உணவு கட்டு பாடு இல்லாமல் கண்டதையும் உள்ளே தள்ளுவதும்,உக்காந்த இடத்திலேயே கணணி முன் நேரத்தை விரயமாக்குவதும் தான் இந்த பிரச்சனைக்கு மூல காரணமாகும். அது சரி இந்த பிரச்சனையை எப்படி இல்லாமல் செய்வது அல்லது உடல் எடையை எவ்வாறு குறைப்பது என்பதை பற்றி பாப்போம் , பல வருட ஆரய்சிக்குபின் மருத்துவர்கள்   உடல் எடைய குறைக்க மிகவும் சுலபமான உடற்பயிற்சியை கண்டுபிடித்துள்ளனர்.இது  100% பயனளிக்க கூடியது, எந்த இடத்திலும் எந்தநேரத்திலும் மிக சுலபமா செய்ய கூடிய உடற் பயிற்சியாகும்.இந்த உடற்பயிற்சிகள் படத்துடன் கீழே தரப்பட்டுள்ளது நீங்களும் முயற்சித்து பாருங்கள கண்டிப்பாக பலன் கிடைக்கும்... முதலில் நாற்காலியில் உட்கார்ந்து இட  பக்கம் பார்கவும் .. ..        அடுத்து  நாற்காலியில் உட்கார்ந்து வல  பக்கம் பார்கவும்  ....  நண்பர்கள் யாரவது மச்சி வாடா சின்ன பீஸ் ,இங்க பாரு சூப்பர் அய்டம்னு சொல்லி கால்ல விழுந்து கூப்பிட்டலோ மேற்கூறிய உடற் பயி...
Post a Comment
Read more

(Loot again) Get Mi Earphones & Mi Backpack In Just Rs.1

How to Get Mi Band , Mi Earphones & Mi Backpack In Just Rs.1 1, First Of All Just  Click On Below Links 1 By 1  Click 1->  Mi City Backpack Dark Grey Minimalist sleek design  -In Just Rs.1 Click 2->  Mi Earphones Silver Dynamic bass sound  -In Just Rs.1 2. Now Open All Links 1 By 1 3. After Opening The Link Click On “ Click to Bring The Price Down ” Then Click “ I Want it too ” 4. Login into Your Mi Account ( Or Sign Up  –  New Mi Account Giving Huge Price drop Like Rs.50 Or Rs.70 Drop , So Recommend You to Make New Account ) 5. Now You will See 3 Products There In this  Mi 24 Hour Madness Sale  6. Click On “ Participate ” Now Button & Share The Link With Your Friends When Each Friend Click On Your Link , You Will See Some Price cut in Your Products… Finally After Enough Click Your Product Will be Available For Just Rs.1  7. Start Referring , Start Looting MI
Post a Comment
Read more

jQuery Accordion Slider and Menu Plugins

Uses of jQuery Image Sliders and menus like Accordion animation effects for website designing are attractive that showcase featured articles and products in the front page, you will get a list of jQuery Accordion Plugins and Tutorials are professionally designed. jQuery Accordion Plugins and tutorials will help you to learn creating attractive with the dynamic transition and transform effects. you can add animation to the transitions from one CSS structure to another, Compatible with more different browsers like internet explorer, Google chrome, Opera, Firefox, Safari. If you want your website to be a huge success, do try these jQuery Accordion Plugins tutorials just download and with time you can improve your knowledge. JQUERY LITEACCORDION JQUERY COMMON ACCORDION GRID ACCORDION WITH JQUERY VERTICAL SLIDING ACCORDION WITH JQUERY FLEXIBLE SLIDE-TO-TOP ACCORDION ELEGANT ACCORDION WITH JQUERY AND CSS3 JQUERY EASY ACCORDION PLUGIN JQUERY ACCORDION QUE...
3 comments
Read more