Sam Ruston

jQuery is an advanced, easy-to-use Javascript library that allows you to create beautiful and complex animations on your websites and web applications. It is easy to get started with it and works in almost any browser. Some components do not work in most Internet Explorer versions.

To get started, you must download and upload the jQuery script. It is free and can be found here:
jQuery Download.

Showing/Hiding:

Showing and hiding objects on a web page is probably the easiest method of using jQuery. It only requires the ID or CSS class of an object, the way in which you want it to animate and the time parameter.
First, we will try to make a DIV minimize.
Demo:

Code:

onclick=”$(this).slideUp(500);”

Lets split this snippet of code up. First we can remove the onClick event handler that is common in most Javascript scripts. The onClick function just starts the function when the element is clicked. Next, we look at the “$”. The dollar sign is the symbol used to signify that you want to execute jQuery. So, whenever you are writing jQuery, make sure you add the dollar signs before the actual animation. Now, we must define the element we want it to affect. Here we are using the word, “this”. “This” declares that we want to affect the object where the code is placed. In this case, it is the grey DIV. Next, we must place a period to start executing the type of jQuery animation we want to include.

Here are the most common methods:

. slideUp (Hides the element in a sliding motion)
. slideDown (Shows the element in a sliding motion)
. hide (Shrinks and fades the element to 0)
. show (Increases the size and opacity back to the original properties)
. animate (Declares an animation which is designated later on)

Finally, we must add our time parameter. You can either use a word or number of milliseconds. Here we are using the number 500, this means 500 milliseconds (half a second). This is the duration of animation. Basically, it will take half a second for the DIV to become hidden. Another method is to use a word. You can use ‘slow’ or ‘fast’ depending on your preferences. If you use this method, make sure you add the apostrophe symbols on either side of the word. However, this method is not recommended as it is not customizable compared to the time parameter in milliseconds.

Animation

Animation is a method of editing the properties of an element such as:

. Width
. Height
. Opacity
. Positioning

We will start with the creation of the DIV.