JQuery Animate Div Height and Width

JQuery Animate Div Height and Width

JQuery animate background color.

You can use animate method of JQuery to apply animation effect on html div control. Here we will animate height and width of div element. You can also use this technique to resize the element.

Code for advanced user:

$("#div1").click(function(e){            
              
              $(this).animate( {width:'100',height:'50'}, 2000 );

      
            });

Below code explains how it works.

HTML Source:

 <div id="div1">
     This is div animation demo.     
 </div>

We will get element by div id “div1” as $(“#div1”).

JQuery animation effect on div height and width.

<style>
    
    #div1
    {
      background-color:blue;
      width:500px;
      height:500px;
    }
    
</style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
      
      $(document).ready(function(){
      
            $("#div1").click(function(e){            
              
              $(this).animate( {width:'100',height:'50'}, 2000 );

      
            });
      
      });
      
    </script>

Animate method of JQuery accepts two parameters. Second parameter is duration of animation effect. Animation will play for that specified duration.

JQuery Animate Background Color

Let’s see how to animate background color of div element. It will not work without including JQuery ui library.

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

JQuery background color animation code.

<head runat="server">
    <title>Untitled Page</title>
    
    

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script>
      
      $(document).ready(function(){
      
            $("#Button1").click(function(){            
              
            $("#div1").animate({ width:"100",color:"red",backgroundColor:"blue" }, 2000);
      
            });
      
      });
      
    </script>

</head>
<body>
    <form id="form1" runat="server">
            <div id="div1">
                This is div animation demo.     
            </div>
            
        <input id="Button1" type="button" value="button" />
            
    </form>
</body>

Jquery Toggle background color

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

   <script>
     
     $(document).ready(function(){
     
           $("#div1").toggle(
           
                       function(){                          
                             $(this).animate( {backgroundColor:'red',width:'700',height:'800'}, 2000 );

     
                       },
                       function(){                          
                             $(this).animate( {backgroundColor:'green',width:'200',height:'400'}, 2000 );

     
                       }
           
           
           );
     
     });
     
   </script>

Note: Don’t forget to include JQuery UI library otherwise background color change animation effect will not work.

Tags: