HV-Designs.co.uk

January 13th, 2010 in JQuery Tutorials by Richard Carpenter

Jquery Fade In, Fade Out Effect – Updated

• Share

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.

New Revised Code

$(function() {
// OPACITY OF BUTTON SET TO 50%
$("ELEMENT HERE").css("opacity","0.5");

// ON MOUSE OVER
$("ELEMENT HERE").hover(function () {

// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

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.

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

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.

$(function() {
// OPACITY OF BUTTON SET TO 50%
$(".latest_img").css("opacity","0.5");

// ON MOUSE OVER
$(".latest_img").hover(function () {

// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

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

More Demo’s

Pretty cool ah?, Now the effect doesnt stop there as you can apply it to 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