HV-Designs.co.uk

January 19th, 2009 in JQuery Tutorials by Richard Carpenter

Jquery Fade In.Fade Out

• Share

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.

There is an updated version of this tutorial which is alot more stable. You can view there new tutorial HERE

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.

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

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.

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.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

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.

$(document).ready(function(){
$(".latest_img").fadeTo("slow", 0.3);
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});

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

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? See Demo.

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. See Demo.

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