• jQuery Video Tutorials

jQuery - Animation

Let's learn how to use jQuery animate() method to create custom animations on a web pages or any other jQuery (Javascript) Application.

jQuery animate() Method

The jQuery animate() method is used to create custom animations by changing the CSS numerical properties of a DOM element, for example, width, height, margin, padding, opacity, top, left, etc.

Following is a simple syntax of animate() method:

$(selector).animate({ properties }, [speed, callback] );
jQuery animate() method can not be used to animate non-numeric properties such as color or background-color etc. Though you can use jQuery plugin jQuery.Color to animate such properties.

You can apply any jQuery selector to select any DOM element and then apply jQuery animate() method to animate it. Here is the description of all the parameters which gives you a complete control over the animation −

  • properties − A required parameter which defines the CSS properties to be animated and this is the only mandatory parameter of the call.

  • speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

  • callback − An optional parameter which represents a function to be executed whenever the animation completes.

Animation Pre-Requisite

(a) - The animate() method does not make hidden elements visible as part of the effect. For example, given $(selector).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

(b) - To manipulate the position of a DOM element as a part of the animation, first we need to set it's position to relative, fixed, or absolute because by default, all HTML elements have a static position, and they cannot be moved using animate() method.

Example

The following example shows how to use animate() method to move a <div> element to the right, until it has reached a left property of 250px. Next when we click left button, the same <div> element returns to it's initial position.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").click(function(){
      $("div").animate({left: '250px'});
   });
   $("#left").click(function(){
      $("div").animate({left: '0px'});
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px solid #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Click on Left or Right button to see the result:</p>

   <div id="box"  style="background-color:#9c9cff;">This is Box</div>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Custom Speed

We can animate different CSS numerical properties (for example, width, height, or left) of a DOM element with different speed.

Example

Let's re-write above example, where we will animate <div>'s right movement with a speed parameter of 1000 milliseconds, and left movement with a speed parameter of 5000 milliseconds.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").click(function(){
      $("div").animate({left: '250px'}, 1000);
   });
   $("#left").click(function(){
      $("div").animate({left: '0px'}, 5000);
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px solid #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Click on Left or Right button to see the result:</p>

   <div id="box"  style="background-color:#9c9cff;">This is Box</div>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Pre-defined Values

We can use strings 'show', 'hide', and 'toggle' as the value of CSS numeric properties.

Example

Following is an example where we are setting left property of an element to either hide or show with the help of two buttons.

Please note setting ANY of the numeric CSS properties with these values will produce the same result. For example if you will set element's width or height at hide then it will hide the element regardless you set it's width property or height property.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").click(function(){
      $("div").animate({left: 'hide'});
   });
   $("#left").click(function(){
      $("div").animate({left: 'show'});
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px solid #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Click on Left or Right button to see the result:</p>

   <div id="box"  style="background-color:#9c9cff;">This is Box</div>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Multiple Properties

jQuery animate() allows us to animate multiple CSS properties of an element at the same time.

Example

Following is an example to animate multiple CSS properties of a <div> element. When we click on Right Move button, this <div> starts moving towards the right direction till it reaches a left property value to 250px, at the same time element's opacity reduces to 0.2 and width & height of the box decreases to 100px. Next, when we click on the Left Move button, this box returns to its initial position and size.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("#right").click(function(){
      $("div").animate({left: '250px', width:'100px', height:'100px', opacity:0.2});
   });
   $("#left").click(function(){
      $("div").animate({left: '0px',width:'180px', height:'100px', opacity:1.0});
   });
});
</script>
<style>
   #left, #right{margin:3px;border:2px solid #666; height:30px; width:100px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:12px;border:2px solid #666;  height:100px; width:180px;}
</style>
</head>
<body>
   <p>Click on Left or Right button to see the result:</p>

   <div id="box"  style="background-color:#9c9cff;">This is Box</div>
   <button id="right" style="background-color:#fb7c7c;">Right Move</button>
   <button id="left" style="background-color:#93ff93;">Left Move</button>
</body>
</html>

Animation with Queue Functionality

Consider a situation where you need to apply multiple animations which means you need to call animate() method multiple times one after the other. In such situation, jQuery handles these animation requests through a fist-in-fist-out (FIFO) queue and allows to create interesting animations based on your creativity.

Example

Following is an example where we call animate() methods 4 times to take a <div> into multiple directions one by one.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
   $("button").click(function(){
      $("div").animate({left: '250px'});
      $("div").animate({top: '100px'});
      $("div").animate({left: '0px'});
      $("div").animate({top: '0px'});
   });
});
</script>
<style>
   button {margin:3px;border:2px solid #666; height:30px; width:180px;cursor:pointer;}
   #box{position:relative;margin:3px;padding:2px;border:2px solid #666;  height:30px; width:170px;}
</style>
</head>
<body>
   <p>Click on Start Animation button to see the result:</p>

   <div id="box"  style="background-color:#9c9cff;">This is Box</div>
   <button style="background-color:#93ff93;">Start Animation</button>
</body>
</html>

jQuery Effects Reference

You can get a complete reference of all the jQuery Effect Methods at the following page: jQuery Effects Reference.

Advertisements