Open In App

jQuery animate() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The animate() method is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element. 

Syntax:

(selector).animate({styles}, para1, para2, para3);

Here “selector” is the selected element. 

Parameter: It accepts four parameters which are specified below-

  • Styles: It helps to set the new CSS property.
  • para1: It is an optional parameter and is used to set the speed of the parameter and its default value is 400 milliseconds.
  • para2: It is optional and this specifies the speed of the element at different positions.
  • para3: It is an optional function that is used to be performed after the animation is complete.

Return Value: It returns the change made by using the above method.

Example 1: In this example, the parameter is not passed to this method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <!--jQuery code to show animate() method-->
    <script>
          
            $(document).ready(function () {
                $("#b1").click(function () {
                    $("#box").animate({
                        width: "300px"
                    });
                    $("#box").animate({
                        height: "300px"
                    });
                });
            });
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
  
        #b1 {
            margin-top: 10px;
        }
    </style>
</head>
  
<body>
    <div id="box"></div>
    <!-- click on this button -->
    <button id="b1">Click Here !</button>
</body>
  
</html>


Output: 

 

Example 2: In this example, all the parameter is passed to this method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <style>
        div {
            background-color: green;
            height: 100px;
            width: 100px;
            margin-top: 10px;
        }
  
        #b1 {
            margin-top: 10px;
        }
    </style>
</head>
  
<body>
    <div id="box"></div>
    <!-- click here and animation will start -->
    <button id="b1">Click Here !</button>
    <!-- jQuery code to show the animate method -->
    <script>
        $(document).ready(function () {
            $("#b1").click(function () {
                $("#box").animate({
                    height: "200px",
                    width: "200px"
                }, {
                    duration: 1000,
                    easing: "linear",
                    complete: function () {
                        $(this).after(
"<p>Reaches to maximum height and width !</p>");
                    }
                });
            });
        });
    </script>
</body>
  
</html>


Output: 

 



Last Updated : 27 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads