Home arrow JavaScript arrow Page 3 - Using the jQuery Library`s Animation Effects
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
September 30, 2009
TABLE OF CONTENTS:
  1. · Using the jQuery Library`s Animation Effects
  2. · The slideUp() and slideDown() animation
  3. · The slideToggle() and fadeIn() methods
  4. · Developing customized animations with jQuery's animate() method

print this article
SEARCH DEVARTICLES

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<style type="text/css">

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>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

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

return false;

});

});

</script>

</head>

<body>

<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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<style type="text/css">

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>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

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

return false;

});

 

});

</script>

</head>

<body>

<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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials