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 type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.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>


 Let's check live example

0 comments


Leave a comment

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

You may also like