Command Chaining

A further handy behavior of jQuery is that most jQuery methods return a jQuery object that can then be used in your call to another method. You could combine two of the previous examples, like this:

$("#elem").fadeOut().fadeIn();

The preceding code will fade out all the chosen elements, and then fade them back in. The number of items you can chain is arbitrarily large, allowing for several commands to successively work on the same collection of elements:

$("#elem").text("Hello from jQuery").fadeOut().fadeIn();

Try it Yourself: A Simple jQuery Animation

Let’s use some of what you’ve learned so far to do a simple animation exercise with jQuery.

Your HTML page will initially display a <div> element, styled via CSS, but with no content. Here’s the HTML for the page:

<!DOCTYPE html>
<html>
<head>
<style>
#animateMe {
position:absolute;
width: 100px;
height: 400px;
top: 100px;
left: 100px;
border: 2px solid black;
background-color: red;
padding: 20px;
}
</style>
</head>
<body>
<div id="animateMe"></div>
</body>
</html>

First you need to add to your page a <script> element to link to the jQuery library—in this case, via a CDN:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

The first thing to do is add a little text to the <div> element using jQuery’s text() method:

$("#animateMe").text("Changing shape...")

You can then call animate() to change the size (and therefore the shape) of the element:

$("#animateMe").animate(
{
width: "400px",
height: "200px"
}, 5000, function() {
// callback function
}
);

Of course, since the text() and animate() methods operate on the same element, you can use command chaining to concatenate the two:

$("#animateMe").text("Changing shape...").animate(
{
width: "400px",
height: "200px"
}, 5000, function() {
// callback function
}
);

When the animation has completed, let’s change the text in the element, and then have the element fade slowly away. We’ll chain these two commands, and use the callback function of the previous call to the animate() method to execute these additional commands once the animation is complete:

$("#animateMe").text("Changing shape...").animate(
{
width: "400px",
height: "200px"
}, 5000, function() {
$(this).text("Fading away ...").fadeOut(4000);
}
);

Note the use of this. Because you’re currently carrying out methods on the $("#animateMe") parent element, using this inside the code block refers to that parent element.

Finally, you need to carry out all of this activity when the DOM is ready, by wrapping the code inside jQuery’s $(document).ready handler.

The complete listing is shown in below code. Create this page using your text editor, and load it into your browser.

To use a version of jQuery stored on a CDN, you need your computer to be connected to the Internet. If you have no Internet connection, you need to use a local copy of jQuery to try out these examples.

<!DOCTYPE html>
<html>
<head>
<style>
#animateMe {
position:absolute;
width: 100px;
height: 400px;
top: 100px;
left: 100px;
border: 2px solid black;
background-color: red;
padding: 20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("#animateMe").text("Changing shape...").animate(
{
width: "400px",
height: "200px"
}, 5000, function() {
$(this).text("Fading away ...").fadeOut(4000);
}
);
});
</script>
</head>
<body>
<div id="animateMe"></div>
</body>
</html>

When the page has loaded, you should see a red <div> element with a black border, and containing the words “Changing shape....” Once animated to its new width and height, the wording changes to “Fading away...,” and the element fades out to nothing. Below snapshot shows the animation taking place.

PRV MENU NEXT

Command Chaining

Try it Yourself: A Simple jQuery Animation

Latest Post