Explain the use of .animate() function in jQuery

Last Updated : 01 Sep, 2021

Introduction: The jQuery animate() function performs custom animations on a set of CSS properties.

Syntax:

(selector).animate(properties [,duration][,easing][,complete])

Parameters:

properties (*required): These define the objects of CSS properties and values to animate. Only numeric values such as height, width, left, etc can be animated whereas the properties that are non-numeric cannot be animated such as background color. In addition to numeric values each property can take the strings ‘show’, ‘hide’, and ‘toggle’.
duration (optional): It gives the number or duration for how long the animation will run. This is given in milliseconds. The default value if not specified will be 400 milliseconds. The string ‘fast’ indicates the value of 200 milliseconds whereas the string ‘slow’ indicates the value of 600 milliseconds.
easing(optional): It specifies the speed at which the animation progresses at different points within the animation. The default value is string ‘swing’. The ‘linear’ value will run the animation at a constant pace.
complete(optional): A callback function that is called once the animation is complete.

Example 1: In this example, we are animating the circle by increasing the height and width of the circle. We are also using a callback function that alerts a message once the animation is completed.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.0.min.js"> 
    </script> 
      
    <style> 
        #circle { 
            height: 150px; 
            width: 150px; 
            margin-top: 30px; 
            padding: 10px; 
            background-color: #00b3b3; 
            border-radius: 50%; 
            display: inline-block; 
            position: absolute; 
        } 
  
        #btn { 
            padding: 20px; 
            font-size: 14px; 
        } 
    </style> 
      
    <script> 
        $(document).ready(function () { 
            $("#btn").click(function () { 
                $("#circle").animate({ 
                    height: "400px", 
                    width: "400px" 
                }, 3000, animationcomplete); 
            }); 
  
            function animationcomplete() { 
                alert("animation is completed"); 
            } 
        }); 
    </script> 
</head> 
  
<body> 
    <button id="btn">Animate</button> 
    <div id="circle"></div> 
</body> 
  
</html> 

Output:

Example 2: In this example, we are animating a logo image that jumps up and down without stopping.We repeatedly calling the function so that the animation doesn’t stop as shown in the code below.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.0.min.js"> 
    </script> 
  
    <style> 
        body { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            background: brown; 
        } 
  
        img { 
            position: absolute; 
            border-radius: 50%; 
        } 
    </style> 
  
    <script> 
        $(document).ready(function () { 
            function Bounce() { 
                $("#myimg").animate({ 
                    top: "100px", 
                    width: "200px" 
                }, 1000, function () { 
                    $("#myimg").animate({ 
                        top: "300px", 
                        width: "250px" 
                    }, 1000, Bounce) 
                }); 
            } 
            Bounce(); 
        }) 
    </script> 
</head> 
  
<body> 
    <img id="myimg" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210824161630/logo.png"
        width="200px" height="200px" /> 
</body> 
  
</html> 