Week 2 - More Effects

1 Mar 2010 - tips-tutorials

Welcome to lesson 2 of our series of 5 JQuery tutorials

Today, I will introduce some more easy to use JQuery effects that you may want to consider implementing into your web site, or even replacing the Flash content you may already have.

Show / hide example

First, lets start with a simple area of text with can be shown or hidden from a click of a button

Here is an example of what we shall produce:

How to develop it

First, attach the JQuery library as explained in lesson 1. If you have yet to view this lesson visit lesson 1 now.

Now lets write the HTML. We need one button with a unique ID, which when clicked will show or hide a div with a unique ID that has some text inside. For this example I will give the button an ID of 'clickme' and the div an ID of 'show_hide'

The J-Query code is simply 6 short lines, using the toggle function

Breaking down the code

This means when the document object is ready code inside the { } will be executed.

References the button we previously created with an ID (#) of clickme

Means when the #clickme input button is clicked on, a function will be executed

This line simply means the div with an ID (#) of 'show_hide' will have the toggle function executed each time the button is clicked

Pretty simple hey!!

Finished Code

Animate with JQuery Example

For this example I will introduce some animation possibilities that you may want to consider using to replace any Flash you have in your site. While Flash doesn't integrate with all the browsers used on IPhone, IPad and other mobile phones, JQuery is fully assessable with all major browsers on all platforms.

For this example we will activate some animation from clicking a text link

Here is an example of what we shall produce:

Here the red box will move 300px to the left, then increase to 100px in width, then increase to 100px in height and finally move back to it original position.

This nice little effect can be done with 12 lines of JQuery centering around the animate() function. So gone are the days of having to mess around with tweens and timelines in Flash!

How to develop it

Assuming JQuery script is attached to your document, you need to create a link that when clicked will activate the animation to begin. I have given my link an unique ID of 'click_me'. The href attribute of the link can be set to anything as using JQuery, we will disable the normal action of the link (ie, it will not go anywhere!)

Now we must produce the red square that will be animated. I have given my red square an ID of 'animate_me' and set the background colour to red, width to 50px, height to 50px and its position to relative. It position type must be set to enable it to move.

Now for the JQuery.

Breaking down the code

This means when the document object is ready code inside the { } will be executed.

References the link we previously created with an ID (#) of 'click_me'

Means when the #click_me link is clicked on, a function will be executed

This is where it starts to get abit more tricky. Here the red div we created with an ID (#) of 'animate_me' will have the animate() function executed. The animate function has three parameters. The first one {"left" : "300px"} means the position of the div will move 300px to the left. The next parameter 2000 means it will take 2000 milliseconds (2 seconds) to complete. The final parameter (function() {}); is a 'call back function' and this means that when animate function is complete, another function will be executed. Each of these 3 parameters are seperated by a ,

This same pattern is repeated for each of the stages of the animation. i.e Another animate() function with three parameter is activated once the last one has finished.

The second animate function has the parameter {"width" : "100px"} which mean the width will change to 100px. The third animate function has {"height" : "100px"} which means the height will change to 100px and final animate() function contains {"left" : "0px"} which means the red square will move back to its orginal position of 0px left.

The final thing I want to mention is the return false; part of the JQuery code. This basically disables the normal action of the link and therefore, when clicking on the link, the browser will not redirect the user anywhere.

Finished Code

Simon Lait
Web Developer, Candeo Media

SHARE THIS

Share

Your Comments

Comment on this Post

Name :

 

Comment :

 

 

Please enter the verification code that appears in the box above into the box below to proceed: