Icon fading using jQuery

Time for another jQuery round! Following the previous sliding menu with jQuery and rollovers and tooltips with jQuery, this time I want to respond to a commenter, who asked for icon rollover through fading instead of the common “swap!”. We can achieve this icon fading with jQuery and in this article we will learn to do so. I will also explain how to set up your page to work with jQuery, given that I’ve received some messages asking how to enable jQuery for a page.

Now, as usual, here’s the finished example of icon fading using jQuery, but you can also take a look at my RSS button at the top. Roll your mouse over it and you will see it change.

Let’s begin now by jQuerifying our page!

Setting up jQuery

The jQuery library is a simple JavaScript file, and you only need to link it from your html page to get it rolling. You can add it in within the <head> tags, at the beginning of the html page, like so:

[code=’html’]

http://jquery.js

[/code]

Then, you need to add your own JavaScript code to define the behaviour you want. You can either write down the code in the same page…

[code=’html’]

http://jquery.js

//code goes here…

[/code]

…or you can link a JavaScript file with your code. This is the way I prefer so I can work clearly in my script. I’m going to name it general.js and include it just like I’ve included the jQuery file.

[code=’html’]

http://jquery.js
http://general.js

[/code]

Now we’re ready to go. We can start adding our code to our general.js script

Marking up

This time, the basic idea is having two images stacked upon each other, we’ll be fading one and revealing the other. We’re going to add the images one after the other. Notice that we’re using the same code than the previous slide menu using jQuery so you can see how easy is to add functionality to an existing code.

[code=’html’]

[/code]

Positioning the elements

Since we want them to be stacked we need to assign an absolute positioning to them. We won’t have to deal with z-index given that when one is visible we don’t need to see the other. We can use absolute positioning since we’re inside an li using relative positioning.

[code=’css’]

#iconbar { height:40px; position:absolute; top:45%; left:45%; }
#iconbar li {
float:left; position:relative; margin-right:20px;
padding: 7px 3px 0px 10px;
width: 30px;
height: 30px;
background:#eef;
border: 1px dashed #ffc0ff;
}
.base{
position:absolute;
top: 6px;
}
.hover{
display:none;
position:absolute;
top: 6px;
}

[/code]

The .base element will be the image that is first displayed when you arrive at the page. Naturally, .hover will be the image that is shown when we roll over the image with our mouse. We’re going to hide this item using display:none. Finally, I’m adding and top:6px offset from the top for the IE browsers, that otherwise would render the image at the top (0px) of the containing box, the li element.

Unlike the previous articles, the #iconbar li has a defined height so it won’t collapse due to the absolute positioning of all the inner elements. Previously, the span had absolute positioning but the image didn’t, so the li element would stretch to make it fit. Since now all the elements of li have absolute positioning, li collapses. Thus we need the defined height.

Code time

We need to think a minute about our coding. When our mouse is over the .base image we need it to fade out and fade in the .hover image. When it leaves we need the reverse process. However, since we’ll be hiding the .base image we won’t be able to trigger its events. Instead, we would trigger .hover image events. We’re going to need two events sets, one for .base on mouse roll over and one for .hover on mouse roll out. Here’s our code:

[code=’js’]

jQuery(document).ready(function(){
$(“#iconbar li .base”).hover(
function(){
$(this).animate({opacity: “hide”}, “slow”);
$(this).next().animate({opacity: “show”}, “slow”);

//code for showing span goes here…
},
function(){
//nothing here because it will never be triggered.
}
);
$(“#iconbar li .hover”).hover(
function(){
//nothing here because it will never be triggered.
},
function(){
$(this).animate({opacity: “hide”}, “slow”);
$(this).prev().animate({opacity: “show”}, “slow”);

//code for hiding span goes here…
}
);
});

[/code]

Due to simplicity, I’ve omitted the code for the span show/hide, but you can still get it from the source. Let’s read our code: we begin with the #iconbar li .base event triggering and we animate the opacity towards 0 to hide this image. At the same time (both animations will start almost simultaneously since we didn’t chained them: .hover animation won’t be waiting for .base animation to finish) we animate the next element, our .hover image towards being showed.

At this point .base is hidden so, like we said earlier, we won’t have its mouse left event to trigger. We now add the next function to the #iconbar li .hover element. Its mouse roll over event is not available since we’re already inside its active area. When our mouse leaves we trigger its mouse left event and animate .hover to be hidden and we show .base animating its opacity. Here you have the finished example of icon fading using jQuery.

That’s it, rest a bit now…

Epilogue

We’ve seen another jQuery technique and by this time you might be getting used to its syntax. I find jQuery extremely powerful, due to its simple syntax and approach and it’s cross browser safety is the cherry in the ice cream. jQuery must be indeed the best JavaScript library out there, since it’s packaged into desktop applications like Ubiquity for Firefox from Mozilla Labs and huge sites like Google Code (check /js/codesite.pack.01312008.js linked in the head section).

What do you think? do you use jQuery or some other library in your work?

8 thoughts on “Icon fading using jQuery”

  1. Hi Heather, it’s my pleasure to share this small tips. After all, we all started here, I wouldn’t know anything if it wasn’t for all the people I have learned of. It was high time to give back. Thanks for the twit!!

  2. okay, i’m so sorry but i don’t understand this tutorial or thing at all. when i searched google.com, i wanted to know how to do colors… not all this heebie jeebie. i’m sure this would be helpful to other people though. great work?

  3. hi i am am new to codiing at all.. i am just using wordpress to make a simple portfolio site, and i wanted the icons to be bw and on rollover they should become colored.
    searching i came to your site. would you be kind enough to let me know in a layman’s language how to do this through wordpress.
    thanks for your time to read this.

    regards
    manojit

  4. Excellent tutorial! The only one out of many wich actually worked for me, and so well explained! Thanks alot, this was very usefull.

    Greetings
    Bryan

Leave a Reply to Justin Cancel reply