JavaScript animation with jQuery.animate() - Introduction

“How can I animate web page elements with JavaScript, using jQuery”?

Animation in JavaScript can be tricky. What at first may seem easy, quickly becomes a scattered mess of timeouts and callbacks. But with jQuery.animate(), you have a simple and elegant way of implementing animation in your web page, without all the headaches and jerky performance.

jQuery.animate() has a very simple syntax: Chain the return value of a jQuery collection with the .animate() method, pass in an options object, a speed value, and off you go. It really is that simple.

Before we get into the examples, here is the markup we will use:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>jQuery Animate Example</title>
        <script type="text/javascript" 
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
       ></script>
        <style>
            .moveMe{
                position:relative;
            }
        </style>
    </head> 
    <body> 
        <div class="moveMe">
            Lorem ipsum dolor sit amet
        </div>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery Animate Example</title>

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

></script>

<style>

.moveMe{

position:relative;

}

</style>

</head>

<body>

Lorem ipsum dolor sit amet

</div>

</body>

</html>

Example # 1

$(".moveMe").animate({
"left": "+=300px"
}, 4000);

$(".moveMe").animate({

"left": "+=300px"

}, 4000);

Here is the jsFiddle.net Link for Example # 1: http://jsfiddle.net/jPaHy/

In Example # 1, we use a jQuery selector to return a collection. In this case, the collection contains only one element. Here’s a rundown of the syntax:

The jQuery selector “$(“.moveMe”)” returns a collection of one element
We chain-in the .animate() method to that return value
We pass-in an object to the .animate() method as the first argument
In that object, we have one property: “left”, and the value is: “+=500px”
The second argument that we pass in is the speed, which in this case is 4000 miliseconds (i.e. 4 seconds)

And that’s it!

Example # 2

$(".moveMe")
.animate({
        "left": "+=300px"
}, 2000)
.animate({
        "top": "+=200px"
}, 2000);

$(".moveMe")

.animate({

"left": "+=300px"

}, 2000)

.animate({

"top": "+=200px"

}, 2000);

Here is the jsFiddle.net Link for Example # 2: http://jsfiddle.net/BRWDr/

In Example # 2, we add a second chained .animate() method. There is little difference in the second call; instead of manipulating the “left” property, we manipulate the “top” property, which pushes the text down by 200 pixels.

Example # 3 – Using the jQuery.animate() callback function

$(".moveMe")
.animate({
        "left": "+=300px"
}, 2000,function(){
    $(this)
        .text('all done!')
        .css('color','red');
})

$(".moveMe")

.animate({

"left": "+=300px"

}, 2000,function(){

$(this)

.text('all done!')

.css('color','red');

})

Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/8FZ87/

In Example # 3, we pass-in a third argument. This, of course, is the callback function. What this means is that when jQuery.animate() finishes with the animation, it runs the callback function, if one is passed-in. You could certainly pass-in a named function, or as we have done, you can pass-in an anonymous function. In the callback, we change the color of the text to red, and change the text in the element to “all done!”.

Summary

The amount of JavaScript we would have had to write to accomplish this would have been a total pain in the neck. All that code is in jQuery, and it abstracts away the details, leaving you with a syntax that is both simple and elegant.

Once you have mastered the simple syntax of jQuery.animate(), moving elements around the page becomes trivial

Notice that in the markup, I applied the following CSS to the element that we want to animate: “position: relative;” We needed this because our examples manipulated the “left” and “top” properties. So, if the element was not positioned, nothing would happen when the JavaScript code ran.

The jQuery.animate() method makes it trivial to animate elements in a web page. Once you learn the syntax, it is incredibly easy. Of course, there is much more that can be done, and some impressive advanced features are available. This tutorial was meant only to explain the absolute basics of jQuery.animate(), so that if you have never used it before, you can get started right away.