...

Library - JQuery

Back to Course

Lesson Description


Lession - #562 JQuery Animate


The animate(>
method performs a custom animation of a collection of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. only numeric values is animated (like "margin:30px">
.

The jQuery animate(>
method performs custom animation using element's vogue properties. The animate(>
method changes existing style properties to the specified properties with motion.

Specify a selector to get the reference of a component to that you wish to add animation effect then call animate(>
methodology with JSON object for style properties, speed of animation and other options.

Example


<html>  
<head> 
 <title> jQuery Example</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <style>
   
     .yellowDiv {
            background-color: yellow;
            height: 100px;
            width: 100px;
        }
    
</style>
 <script type="text/javascript" language="javascript">  
   $(document>
.ready(function (>
{ $('#myDiv'>
.animate({ height: '200px', width: '200px' }, 5000>
; }>
; </script> </head> <body> <h1>Demo: jQuery animate(>
method</h1> <div id="myDiv" class="yellowDiv"> </div> </body> </html>
Try it here