This tutorial have been incorporated inside a plugin! Download and read about it here. Although it is good to read this tutorial, as this will show you the backend of the plugin
Remember the last post about the sliding or bouncing effect using jQuery to make some cool image buttons… If you liked the effect, then its a guarantee that you will definitely love the FadeIn and Out effect which we are going to discuss now. You should have thought of about this before, right? Well, before you get confused about what exactly I am talking about, here is a quick Online Demo of the output. Just hover over the images to see how Fade animations can give really attractive appeal, when done properly using jQuery…
Want to make such buttons for your webpage? Then just read below to know how!
#1: Strategy and Planning – The HTML thing:
Same as before. We are going to put some images inside list tags using HTML and then will use CSS to make them appear side by side horizontally as buttons and to change the opacity of the images when hovered. After that we will use jQuery to smooth the animation…
Here is the HTML code which we are going to use:
<div id="fadeanim">
<ul>
<li><a href="http://twitter.com/swashata"><img src="images/twitter.png" /></a></li>
<li><a href="http://friendfeed.com/swashata"><img src="images/friendfeed.png" /></a></li>
<li><a href="http://www.facebook.com/swashata"><img src="images/facebook.png" /></a></li>
<li><a href="http://picasaweb.google.com/swashata4picasa/"><img src="images/picasa.png" /></a></li>
<li><a href="http://technorati.com/people/technorati/Swashata"><img src="images/technorati.png" /></a></li>
<li><a href="http://digg.com/users/swashata"><img src="images/digg.png" /></a></li>
<li><a href="http://swashata.stumbleupon.com/"><img src="images/stumbleupon.png" /></a></li>
<li><a href="http://www.youtube.com/user/Swashata"><img src="images/youtube.png" /></a></li>
<li><a href="http://www.orkut.co.in/Main#Profile.aspx?uid=15548331932883821176"><img src="images/orkut.png" /></a></li>
<li><a href="http://www.blogger.com/profile/03512256744724769113"><img src="images/blogger.png" /></a></li>
</ul>
</div>
#2: Styling up using CSS:
Now my favorite part… Styling! Here we don’t need much styles except, making the images float side by side and change the opacity on hover… Here is the piece of the CSS code which I have used:
#fadeanim {
width: auto;
min-height: 100px;
margin: 10px auto;
padding: 5px;
border: 1px dashed #066;
}
#fadeanim ul {
float: none;
width: 530px;
list-style: none outside none;
list-style-image: none;
list-style-type: none;
padding: 10px;
margin: 0px auto;
}
#fadeanim ul li {
float: left;
list-style: none;
margin: 0px 5px 0 0;
}
#fadeanim ul li img {
opacity: 1;
}
#fadeanim ul li img:hover {
opacity: 0.4;
}
Just the copy the CSS inside a style tag like
<style type=”text/css”>
/* Paste your code after this line */
</style>
and put it before the closing </head> section or attach it using an external style sheet like this…
Where, main.css is the css file containing the style definitions. Just check the Download Package to see how to do these things. If you are new to this, then I would recommend you to read the following post:
Note that using CSS we have managed to change the opacity to 0.4 when the images are being hovered. So the end effect will be shown to the users having javascript disabled!
#3: Making the animation using jQuery:
Now the fun part. Here we are going to use jQuery to make the animation smoother and attractive. But before you proceed make sure that you have the latest jQuery framework on your Website template or Blog. Just paste the following line anywhere before the closing </head> of your template:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
This will include the jQuery framework 1.4.2 on your template. This is latest as of now. You should read the basics of jQuery if the framework has been updated or you are confused about anything…
Now let us see the code for the animation…
function fader(userOptions) {
op = { //Preset values of the parameter
'CSS_selector':"#fadeanim ul li img", //The CSS selection of the image where you want the sliding effect
'fadeInDuration':600, // Time taken [in ms] for the FadeIn animation on mouse hover
'fadeOutDuration':400, //Time taken for the FadeOut animation
'opacityChange':0.4 //Change of Opacity
};
op = $.extend({}, op, userOptions); //We extend the user Options using jQuery
$(op.CSS_selector).hover(
function() { //This is the hover in function
$(this).stop(); //Stops any animation being done on the button
$(this).css({opacity:1}); //Changes the opacity back to not if not already
$(this).animate({opacity:op.opacityChange},op.fadeOutDuration); //Now animates the opacity to the user defined value
},
function() { //This is the hover out function
$(this).animate({opacity:1},op.fadeInDuration); //Animates the opacity back to 1
}
)
}
The function of each line is explained as comment. So read them one by one if you want to understand how the code works…
Now just add the above code using a <script> tag like this:
<script type="text/javascript" src="js/fade.js"></script>
Where fade.js is the JS file containing the above code and which is located on the folder js in your website root. Simple copy paste the code above using Notepad to make that file… Make sure that .js is the extension!
Now we need to call the script… By default, it is set to animate all the images inside a <div> tag having id=”fadeanim”. For now, we will see the basic execution. We can also animate image tags on other location. We shall see that later.
To execute the script, just add the following line, on that fade.js file using Notepad.
$(document).ready( //Now call the function when document is ready
function() {
fader();
}
);
This will make the images to animate as shown in the Demo…
Using the Parameters of the script:
Actually the script is intelligent enough to control the animation of more than one set of images with different opacity and timing. Before we see how to do that, here is the list of the parameters:
| Parameter | Description |
| CSS_selector | Give the CSS location of the set of the images where you want the animation effect |
| fadeInDuration | The time duration [in milli second] of the Fade In animation which is done during hover in of the cursor |
| fadeOutDuration | Time taken on hovering out |
| opacityChange | The ultimate opacity on mouse hover |
To use the function with the parameters simply use the following structure:
fader({
'option1':value1,
'option2':value,
'option3':value
});
Simply omit the parameter which you don’t want to change. Also don’t give a comma(,) after the last parameter. For example, if you want the animation for every image tags inside a div with id itg_anim with FadeIn duration 200 and opacity change 0.2 then use the following code:
fader({
'CSS_selector':"#itg_anim img",
'fadeInDuration':200,
'opacityChange':0.2
});
Just to remind you, here is the Online Demo Link and the Package Download Link for your ease:
So, that was all about the Fade animation using jQuery. I hope you have liked it! Please give your feedback as it encourages us to make more such cool things. Also if you face any problem feel free to ask here!
This one is much better then earlier version with bounce. Especially for subscribe/share buttons.
My recent post Jednostavni trikovi za Google pretragu
I was also thinking the same 🙂 Enjoy buddy and thank for your feedback
yup i also think so, i am going to use this for subscribe type buttons and will use bounce one for share post buttons 😉
Hope this isn’t too dumb a question… I read the link about familiarising yrself with JQuery, and it said you could host the files on Google & link to them in the template, so you completely lost me at:
Where fade.js is the JS file containing the above code and which is located on the folder js in your website root. Simple copy paste the code above using Notepad to make that file…
Am I missing something really obvious? 😀
Thanks for any help with this tut, in advance
Ive used this for a simple hover fade effect on some vertical UL lists. It works great but I have found that in IE8 it seems to add an extra white line (space) in between the LI elements lists. Strange thing is that this is only happening after every second LI element… Weird! – In Saf and FF it works perfectly, not extra line. Any clues as to why this may be?
Hi, thanks for this script, i got it working and also in conjunction with a fade script.
I was wondering why the page jerks(flashes, glitches, refreshes or however else I can describe it) when you click on a nav item. When the new page loads it does this.
It did not do it before when my links were just text so I know it is in the JS or somewhere.
Is this a common problem that people hack easily? If so I’d love to hear how. Thanks
Blandy, maybe check the css margins of your list
Broken in IE 6 -7 -8 -9
hi
i can’t download…
Very unique implementation of jquery to create social network sharing buttons in a website.
A post worth the time reading! I have been using the jQuery for image button creations and has been doing so for sometime now as it effectively works for me. I am still on the right track, am I not?
If you swing back and forth over the icons, you get animation queue buildup– which can be cute, in its own way. But probably not what you want.