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.
Using the jQuery Library`s Animation Effects - The slideToggle() and fadeIn() methods (Page 3 of 4 )
In the section you just read, I demonstrated how to use the "slideUp()" and "slideUp()" methods to turn the visibility of a targeted element on and off within a web document, by using a "sliding" visual effect.
Now I'm going to show you how to utilize a couple of additional methods, called "slideToggle()" and "fadeIn()" respectively. They also can be used to play with the visibility of any web page element, but by using a different animation.
Not surprisingly, the first of these methods permits you to alternately display and hide the element in question when clicking on it. A typical use of this method is illustrated by the example below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h1>Basic example on using jQuery with slideToggle() method</h1>
<a href="#">Click to show/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>
As you can see, the previous hands-on example demonstrates how to use the aforementioned "slideToggle()" method. In this case, if the previous sample link is clicked on, then it'll make the div below it appear and disappear smoothly in the web document.
In simple terms, it might be said that the "slideToggle()" method can be used to replace the team composed of "slideUp()" and "slideDown()" respectively. Naturally, it's up to you to decide which methods best suit your needs.
Finally, the "fadeIn()" method, as you may guess, comes in handy for turning visible a specific web page element via a simple fade-in animation. A basic utilization of it is demonstrated by the following code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h1>Basic example on using jQuery with fadeIn() method</h1>
<a href="#">Click to show 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>
That was indeed very simple to code and grasp! In this case, the fade-in effect will be applied to a simple div, which has been previously hidden on the pertinent web document via a simple "display: none" CSS property.
Of course, jQuery also provides a "fadeOut()" method to make any targeted element disappear from the web document. Since its implementation is nearly identical to its counterpart "fadeIn()," I won't waste your time explaining how it works.
So far, I've shown you how to use some methods provided by the jQuery library to perform certain basic animations on selected web page elements. Nevertheless, the library also comes with an "animate()" method that allows you to implement fine-tuned visual effects with minor efforts.
The last section of this tutorial will be focused on explaining how this brand new method functions, so jump ahead and read the next few lines. It's only one click away.
JavaScript 
More Top jQuery Tutorials for Beginners
