Jquery Fade In.Fade Out

Hi there in this tutorial il show you some simple effects you can use to spice up your websites using jquery. Your probably thinking oh no not another coding language ive got to learn. Dont worry its real simple to use and implement. If you really want to get stuck into jquery then nettuts have wrote a complete series on the subject SEE THIS LINK.

Firstly whats jquery? i hear you ask, well jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.

What can i do with this code your about to give me? Basically its a fade in fade out effect. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website wether it be an image, text, a link or even a div.

The code looks like this.

[sourcecode language=’jscript’]
$(document).ready(function(){
$(“ELEMENT HERE”).fadeTo(“slow”, 0.3);
$(“ELEMENT HERE”).hover(function(){
$(this).fadeTo(“slow”, 1.0);
},function(){
$(this).fadeTo(“slow”, 0.3);
});
});
[/sourcecode]

Let me explain the code above. Line 1 basically means load the javascript when the document has fully loaded, this means the javascript wont start untill the whole HTML file is loaded which includes ads also. When everything has loaded the script will run.
Line 2 means fade the element to 30%, 0.3 is 30%, at a speed of slow. Where it says “element here” that would be our ID.
Line 3 means when the mouse is hovered over “the element” fade to 1.0 at a speed of slow 1.0 equals 100% The image will then stop at 100% untill the mouse is moved off the element. Then the last bit of code means when the mouse is moved off the element fade back to 30%, 0.3 at a speed of slow.

Now im going to show you how to add this all into your website. Ive put together a small download which contains a simple example. Download it using the button below.

Extract the contents of “example_one.zip” to your desktop, inside the folder example one create a new folder called “js” Inside this folder place the jquery file which can be found here. Then create a blank notepad file and save inside the “js” folder called “custom.js” So inside the JS folder there should be 2 files. “jquery1.3.min.js” and “custom.js”. Open up the custom .js file in dreamweaver then copy and paste the jquery effect code in, then save.

You should be all set to go, just a couple of things to take note of. If you look inside the HTML code of the example you will notice inside the HEAD tages there are some lines of javascript.

[sourcecode language=’jscript’]


[/sourcecode]

Its basically the same as linking a .CSS file only its javascript. Without this bit of HTML code jquery wont work. Make sure the filenames of the .JS files match yours, i do believe you need to change the 1st one from “jquery” to “jquery-1.3.min.js”.

Now for the effect, as i said before you can use the effect on almost anything inside of a HTML document, now we want to add the effect to the individual images we have in our example HTML file, if you look at the code in the HTML file regarding the images you will notice they have a class of “class=”latest_img”. The class is defined in the .CSS file. The class is a form of ID in which the images can be identified by. If we open up “custom.js” in dreamweaver then locate the words “ELEMENT HERE” inside two quotes, change “ELEMENT HERE” to the class which is “.latest_img” the effect will apply its self to everything with a class of “latest_img” in our case the images. Your .JS code should looke like this.

[sourcecode language=’jscript’]
$(document).ready(function(){
$(“.latest_img”).fadeTo(“slow”, 0.3);
$(“.latest_img”).hover(function(){
$(this).fadeTo(“slow”, 1.0);
},function(){
$(this).fadeTo(“slow”, 0.3);
});
});
[/sourcecode]

Save it, then view your HTML file in your browser. The effect should have been applyed to the single images. See demo below.

Pretty cool ah?, Now the effect doesnt stop there as you can apply it other things within an HTML document, how about applying it to some text?

The text within my HTML document is in P tags within a div so if i apply the effect to the p tag within a certain div you get the effect above. You can also apply the effect to a whole div, which means everything in that div will fade even the div itself.

Here are all the effects on one page.

Why dont you try and incorparate the fade in fade out effect in your designs, or just play around and see what you can come up with 😉

Thanks for reading

41 thoughts on “Jquery Fade In.Fade Out”

  1. Hmm… That’s neat! I think I should really start to code in jQuery, but 2 be honest, I’ve never really done something with JavaScript, where should I start?

    netsnake

  2. Pingback: tutorialand.com
  3. I didn’t get this,
    Like it doesn’t show steps by steps. It made me get very confused, I was going to use it for a school project but I really can’t. I think that you should put one up with the steps so that people know what to do instead of having to download all this stuff

  4. If you hover quickly for many times hover effect last for some time. In order to avoid this you need to add .stop().

    Cheers

  5. Great tutorial. I’m a jQuery beginner and had a pretty easy time with it. Also, for your “Share and Enjoy” section at the bottom, did you use the same thing and where did you get those specific icons.
    Thanks and keep the tuts coming.

  6. the share and enjoy part at the bottom of the article is a plugin for wordpress, the effect is built into that i dont no if it uses jquery.

    AS for the icons, there from dryicons.com

  7. >shinokada 24.01.2009 at 3:33 pm
    >
    >If you hover quickly for many times hover effect last for some time. In order to avoid this you need to >add .stop().

    Could someone elaborate on how and where the .stop() is used to limit the continuation of the effect after someone has moved the cursor away

  8. I’m also having an issue with this not working with IE7. Is that a known problem? Or did I mess something up on my end. It is working fine in firefox

  9. the effect works in both firefox and IE7,

    if you copyied & pasted the code from the tutorial double check all quotation marks and symbols are in the right place…. sometimes when you copy and paste it doesnt copy everything over.

  10. my bad, it was the security settings on IE that weren’t allowing it to work. Still wondering if anyone could clarify the proper use of .stop() to prevent the script from looping too many times in case someone gets crazy with the mouse. Either way, thanks for posting this.

  11. $(document).ready(function(){
    $(“ELEMENT HERE”).fadeTo(“slow”, 0.3);
    $(“ELEMENT HERE”).hover(function(){
    $(this).fadeTo(“slow”, 1.0);
    },function(){
    $(this).fadeTo(“slow”, 0.3);
    .stop().
    });
    });

  12. That .stop(). doesn’t work. It disables my other javascripts. I have a problem with the hover. Whenever I use the same div more than 2 times, and when I hover, it only works for two random divs, and then it doesn’t fade in on the others. It feels like the code can’t handle it when you have the javascript set for a class being used by 10 divs.

  13. $(document).ready(function(){
    $(”ELEMENT HERE”).fadeTo(”slow”, 0.3);
    $(”ELEMENT HERE”).hover(function(){
    $(this).fadeTo(”slow”, 1.0);
    },function(){
    $(this).fadeTo(”slow”, 0.3);

    $(this).stop();

    });
    });

    Adding the stop bit of code will stop the effect once it has reached 100% full opacity, it will then stay at 100% untill you hover over it again, then it will darken too 30% again.

  14. That wasn’t the problem. After you check out two portfolios, on the third one, the action buttons won’t fade to 100%. I don’t think its the libraries either, because I tried a regular ol’ javascript from http://www.dynamicdrive.com/, and it was doing the same thing.

  15. Hello,

    very good tutorial!!! It is possible, that I use the effect on a commercial site????

    Best regards

    Thunder

  16. Hello,

    I just tried this effect and it worked quite well for me. I have only one problem: I am using transparent 24bit PNGs and they look messed up in IE7 (black where they should be transparent). I guess most of you know about this problem. Does anyone know a solution to this? I wasn’t able to find one while researching and everything I read was pretty discouraging.

    Thanks in advance and best regards from Germany.
    Daniel Kuijer

Leave a Reply

Your email address will not be published. Required fields are marked *