Learn how to build and design websites with our tutorials.

jQuery Animation Effects Tutorial

In addition to other jQuery methods that let you move, show and hide selected HTML elements, jQuery also has the .animate() method, which lets you create custom animations such as moving elements around, change their appearance and more.

View Tutorial Contents


jQuery .animate() Method

The syntax for the jQuery .animate() method is:


$(selector).animate({"CSS property" , "CSS value"}, duration, callback);

NOTE: All CSS property names must be camel-cased when used in the .animate() method, for example, margin-right should be marginRight, margin-left should be marginLeft, padding-right should be paddingRight, etc.

NOTE: The background-color property cannot be animated unless the jQuery.color plugin is used.

The example below shows you how to apply the .animate() method to a selected HTML element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
div{
	width: 200px;
	height: 200px;
	background: green;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<div>

<p>
This is a paragraph.
</p>

</div>

<button>Animate</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("div").animate({
					"width" 	: 	"300px"
						});
	}); 
});

</script>
</body>
</html> 

The jQuery .animate() method will be applied to the <div> below.

This is a paragraph.


Running Multiple Animations

Each CSS property and value pair (called a declaration), with the exception of the last one, must be separated by a comma (,).

The example below shows you how to apply the .animate() method to manipulate multiple CSS properties of a selected HTML element by chaining calls.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
div{
	width: 200px;
	height: 200px;
	background: green;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<div>

<p>
This is a paragraph.
</p>

</div>

<button>Animate</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("div").animate({
					"width" 	: 	"300px",
					"height" 	: 	"300px",
					"background":	"red"
						});
	}); 
});

</script>
</body>
</html> 

The jQuery .animate() method will be applied to the <div> below.

This is a paragraph.


Using Relative Values

The CSS property values can be either absolute or relative. jQuery assumes that the value given is in pixels by default, for example, the two CSS property values are the same.


$(selector).animate({"width" : "200"});

And


$(selector).animate({"width" : "200px"});

To specify relative values, you need to prefix it with "+=" or "-=".

The code example below shows you how to set CSS property values to relative units within the .animate() method.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
div{
	width: 200px;
	height: 200px;
	background: green;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<div>

<p>
This is a paragraph.
</p>

</div>

<button>Animate</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("div").animate({
					"width" 	: 	"+=300px",
					"height" 	: 	"+=300px",
					"background":	"red"
						});
	}); 
});

</script>
</body>
</html> 

The jQuery .animate() method will be applied to the <div> below.

This is a paragraph.


Using Shortcut Values

The jQuery .animate() method CSS property value can also take one of the following shortcut keywords: "show", "hide" and "toggle".

The code example below shows you how to set CSS property values of the .animate() method using shortcut keywords.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
div{
	width: 200px;
	height: 200px;
	background: green;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<div>

<p>
This is a paragraph.
</p>

</div>

<button>Animate</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("div").animate({
					"width" 	: 	"toggle",
					"height" 	: 	"toggle"
						});
	}); 
});

</script>
</body>
</html> 

The jQuery .animate() method will be applied to the <div> below.

This is a paragraph.


Running Multiple .animate() Method Calls

The code example below shows you how to run multiple .animate() method calls on selected HTML elements.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
div{
	width: 200px;
	height: 200px;
	background: green;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<div>

<p>
This is a paragraph.
</p>

</div>

<button>Animate</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		var div = $("div");
		div.animate({"width" : "300", "height" : "300"}, "slow");
		div.animate({"width" : "300", "height" : "300"}, "fast");
	}); 
});

</script>
</body>
</html> 

The jQuery .animate() method will be applied to the <div> below.

This is a paragraph.