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.
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.
$(“ELEMENT HERE”).fadeTo(“slow”, 0.3);
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.
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.
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