UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery - Animate

Demo and code for jQuery animate

by Athil


Posted on 22 Jun 2019 Category: jQuery Views: 42

Edited on 22 Jun 2019


Here I am going to show how to give animations in jQuery using animate() method.

DEMO

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

The above code will change the height of a control to 150px; with speed 100 and after finishing it will call success function as callback

Full Demo Code

?<!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>
        function change()
        {
            $("#divid").animate({height: '150px'},100,success);
        }
        function success()
        {
            //callback
              alert('success');
          }
        </script>
</html>

 



Leave a Comment: