Hello welcome to another tutorial by hv-designs, today we’ll be re-visiting the “jQuery Fade In, Fade Out Effect” that i posted up earlier last year. There was no point updating the old post as it is over a year old, so here’s the new one.

Dont Know jQuery?

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.

Whats jQuery?

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 50% 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 is pretty much the same as the last snippet only this time is contains some “stop” functions which stops the transition from repeating over and over again. This seemed to be major problem with the last tutorial.

Adding The Effect Into Your Website

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”. Then inside the “js” folder place the jquery libary file which can be found here.

Create a blank notepad file then go to “file > save as”, save the blank notepad file inside the “js” folder called “custom.js”. 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 into the document, 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 tags there are some lines of javascript.

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”.

The Effect

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 look like this.

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