JAVASCRIPT

Using the jQuery Library`s Animation Effects

Welcome to the conclusion of an eight-part series that introduces the jQuery JavaScript library. This versatile library lets you build robust client-side applications very rapidly, thanks in part to an extremely friendly programming interface. In this article, you'll learn how to use the library to build some excellent animation effects.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

September 30, 2009

TABLE OF CONTENTS:

The first two animation methods that I'm going to show you in this tutorial are the ones called "slideUp()" and "slideDown()" respectively. As their names suggest, these methods will apply a slide effect to any targeted web page element. In the first case, that is when using the "slideUp()" method, the element will be progressively hidden by reducing its height, while when utilizing "slideDown()," the element will be displayed by increasing it.

Now that I've explained how these two methods function, please look at the following pair of code samples, which show them in action. Here they are:

(example of using "slideUp()" method)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with slideUp() method</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

div{

width: 200px;

padding: 10px;

background: #ffc;

}

</style>

$(document).ready(function(){

$("a").click(function(){

$("div").slideUp("slow");

return false;

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with slideUp() method</h1>

<a href="#">Click to hide the DIV...</a>

<div>

Content of the DIV goes here... Content of the DIV goes here... Content of the DIV goes here... Content of the DIV goes here...

</div>

</body>

</html>

(example of using "slideDown()" method)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with slideDown() method</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

div{

width: 200px;

padding: 10px;

background: #ffc;

display: none;

}

</style>

$(document).ready(function(){

$("a").click(function(){

$("div").slideDown("slow");

return false;

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with slideDown() method</h1>

<a href="#">Click to show a DIV...</a>

<div>

Content of the DIV goes here... Content of the DIV goes here... Content of the DIV goes here... Content of the DIV goes here...

</div>

</body>

</html>

As I explained earlier, if you test the code samples listed above on your own browser, then you'll see that the DIV included in the two previous web documents will be displayed and hidden alternately, in accordance with the kind of effect applied to it. Even though these hands-on examples are pretty simple, they should be good enough to demonstrate the animation capabilities offered by the "jQuery" package.

Okay, at this point, you hopefully learned how to use the "slideUp()" and "slideDown()" methods discussed previously, so what comes next? Well, in the next section, I'm going to teach you how to use two additional animation methods, named "slideToggle()" and "fadeIn()," to turn the visibility of a selected web page element on and off by using a sliding effect and a fade-in transition.

To learn the full details of how these methods will be put to work, please click on the link below and keep reading.

Next: The slideToggle() and fadeIn() methods >>