Introduction:

In this article, we will explain how to use animate() method in jQuery with example.

Description:
jQuery animate() method use to animate a particular html element  where we need to pass different css animation attributes separated by comma (,). In general animations are performed on only those CSS properties that are specified in numberic values, eg. width, height  etc.
Syntax:

 $(selector).animate({params}, speed, callback);


The params parameter defines the CSS properties to be animated.

The speed parameter is optional and specifies the duration of the effect. It can be set as "slow" , "fast" or milliseconds.

The callback parameter is also optional and it is a function which is executed after the animation completes.

Let's take a simple example to see the animation effect.

 

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $(document).ready(function () {
                $("#btnAnimate").click(function () {
                    $("#divAnimate").animate({
                        width: "400px",                                                height: "200px"
                    }, 500);
                });
            });
        });
    </script>
 
</head>
<body>
    <input type="button" id="btnAnimate" value="Start Animation" /><br /><br />
 
    <div id="divAnimate" style="width: 200px; height: 80px;
   
      background-color: red; position: absolute;">
 
    </div>
 
</body>
</html>

 

Output:

How to animate a particular html element in jQuery
In the above code snippet, clicking button starts animating the width and height properties of “divAnimate” (div having id as "divAnimate") element after every 500 milliseconds in such a manner that the final width and height of that element will be 400px and 200px respectively such as below figure:

How to animate a particular html element in jQuery

I hope it will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like