Using the jQuery Animate Function

August 31st, 2012 Leave a comment
Like the article?
Using the JQuery Animate Function

When making interactive or interesting Web pages, it is helpful to have a way to create animations that do not require special plug-ins or add-ons. The JQuery animate() function is a powerful tool that you can use on HTML elements that is supported by most major browsers without having to have extra pieces to install. Using the animate() function is easy to learn even if you are new to JQuery.

To begin, let’s look at the syntax for the animate() function. There are two different ways it can be called:

.animate(properties, [duration], [easing], [callback] )

Here is a breakdown of each section:

  • Properties – These are the CSS properties that you want the animate function to move
  • Duration – A string or number that determines how long the animation will run
  • Easing – A string that indicates which easing function to use for the transition
  • Callback – A function to call once the animation is complete

.animate(properties, options)

  • Properties – These are the CSS properties that you want the animate function to move
  • Options – These are additional options that you can pass to the method:
  • Duration – A string or number that determines how long the animation will run
  • Easing – A string that indicates which easing function to use for the transition
  • Complete – Like callback above, a function to call once the animation is complete
  • Step – A function that will be called after each step of the animation
  • Queue – A boolean value that indicates whether to place the animation in the effects queue of the browser. If false, the animation will start immediately.
  • specialEasing – A map of one or more CSS properties that is defined by the properties argument and the corresponding easing functions.

To better understand the configuration of some of these arguments, here are some examples. To begin, you will need to add the JQuery library import statement to the HTML file in the HEAD section of the document:

<script type="text/javascript"src=""></script>

In the following animation demos, I will use this CSS and the HTML with some modifications for each demonstration. You can get the demo code at the end of this article as well:

<style type="text/css">
#demo {

Animate Height

To animate the height you would call the animate function, passing the content ID and changing the height value so the ID will vertically expand. Instead of simply “popping” into the new height, the animate() function will draw the element out so it appears to grow as the animation plays.

<input type="button" id="animateHeight" value="Animate"/>
<div id="height" class="demo"></div>
$("#animateHeight").click(function() {
            {"height": "80px"},

Animate Width

Animating the element horizontally along the width works exactly the same way as the height and changing the width property of the element, which allows the element to expand.

<input type="button" id="animateWidth" value="Animate"/>
<div id="width" class="demo"></div>
$("#animateWidth").click(function() {
            {"width": "500px"},

Animating Opacity

Creating the effect of fading an element in and out using the opacity property is similar to the previous two examples. You can increase or decrease the opacity property with the animate() function to change how much of the element is opaque or not.

<input type="button" id="animateOpacityDown" value="Fade Out"/>
<input type="button" id="animateOpacityUp" value="Fade In"/>
<div id="opacity" class="demo"></div>
$("#animateOpacityDown").click(function() {
			{"opacity": "0.15"},

$("#animateOpacityUp").click(function() {
			{"opacity": "1"},

Clicking the fade out button will change the opacity of the image to 15%, cause the element to become very transparent. Likewise, clicking the fade in button will restore the element to 100% opacity.

Animating Movements

Moving elements on the page with JQuery animate is a simple task as well. In the animate() function call we only need to change the CSS position offsets of the element to cause them to change position on the page. JQuery takes care of framing up the animation so the element doesn’t jump to its new location but slides into place.Note that you must have a CSS style rule for the positioning for this animation to work since the browser will require that the element have a positioning value set before allowing us to move it with JQuery.

<input type="button" id="left" value="Move Left"/>
<input type="button" id="right" value="Move Right"/>
<div id="content"></div>
$("#right").click(function() {
			{"left": "+=150px"},

$("#left").click(function() {
			{"left": "-=150px"},

Using Callback Functions

Using callback functions on your animations is an easy way to have another effect happen at the end of your element’s animation. Note that if you have animations “chained up” to happen one after another, each callback function will be called at the end of each animation sequence.

<p>Using Callback Functions</p>
<input type="button" id="animateCallback" value="Animate"/>
<div id="callback" class="demo"></div>
$("#animateCallback").click(function() {
			{"height": "100px", "width": "250px"},
			"slow", function(){
				$(this).html("Animation Complete");

Combining Animations

If you want to set up a chain of animation events there are two different ways you can accomplish this. In this first example, you can set up two animations to happen at the same by specifying both in the animate() function:

<input type="button" id="animateMulti1" value="Animate"/>
<div id="multi1" class="demo"></div>
$("#animateMulti1").click(function() {
		{"height": "100px", "width": "550px"},"slow" 

The second example handles this a little differently by calling the animate() function twice and specifying the height in one and the width in another. When you run the demo you can see the difference in the way the two behave.

<input type="button" id="animateMulti2" value="Animate"/>
<div id="multi2" class="demo"></div>
$("#animateMulti2").click(function() {
		.animate({"height": "100px"}, 500)
		.animate({"width": "550px"}, 500);

It is clear that when you want a seamless looking multi-part animation that the first example is the right one to choose since both events happen together. In the second example first height animation change happens, then the width animation change, which makes for a different result.


I hope you have enjoyed this tutorial on the JQuery animate() function. There are many ways that you can begin to use these effects in your pages that will make your page look professional and become more user-friendly. If you are a new to JQuery, start experimenting with the code in the demo so that you can become more proficient at using the animate() function.

Article Source Files

DescriptionNameSizeDownload method
jQuery Animate Source Codejquery-animate.zip72KBHTTP
Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!