UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery animate

Demo and code for how to animate a control using jQuery.

by Athil


Posted on 13 May 2017 Category: jQuery Views: 875

Edited on 07 Jun 2017


DEMO

Hi, Here I am going to show how to animate a control using jQuery,

To change the height of a div.

    $("#divid").animate({height: '150px'},100,success);

Syntax.

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

In this syntax selector is the control, We can use any control by type, class or Id, animate is the method.

In params section we can use any CSS code to be modified, In speed section, we can write the speed and it is optional. The callback section is optional we can write the name of the function or write a function that to be executed after the successful working of animation.

Full code Example of jQuery animate.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo for jQuery animate</title>
</head>
<body>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <h1>Demo for jQuery animate</h1>
    <div id="divid" style="background:#0094ff;height:80px;width:80px;">
        </div>
    <button onclick="change();"> Height change </button>
</body>
    <script>
        <script>
        function change()
        {
            $("#divid").animate({height: '150px'},100,success);
        }
        function success()
        {
            //callback
              alert('success');
          }
        </script>
        function success()
        {
            //callback
              alert('success');
          }
        </script>
</html>

I this code I writte to change the height of a div with a speed of 100 and callback function to alert success;

 

Another example with jQuery animate

Move a div using jQuery animate

 



Leave a Comment:


Advertisement