jQuery animate Method function


jquery jQuery animate Method function JQuery Designing Effects

How to animate the text and images using jQuery ?

As in the previous chapters we already have discussed the different effect like Show and Hide , Fading , Sliding. Similarly the jQuery support some animation function animate().

Syntax of jQuery animate function

$("TagSelector").animate({ AnimationType:Value }); $("TagSelector").animate({ AnimationType:Value, AnimationType:Value }); //SYNTAX $("p").animate({ height:'150px' }); $("div").animate({ left:'100px', height:'150px' }); //EXAMPLE Note ! Animate functions takes one optional parameters speed time value. Let consider detail examples to build the better concept of animate function.

jQuery function animate()

Using the animate() function we are going to positioned the div to 250 px from left.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="mybutton">Click To Animate Left</button> <div id="mydiv" style="background:#cd2828;height:100px; width:100px; position:relative;"> CodingPk </div> <script> $("#mybutton").click(function(){ $("#mydiv").animate({ left: '250px' }); }); </script>

Output of jQuery animate() left

CodingPk

jQuery function to animate with increment in current relative values

In some cases we didn't know that what is the actual attribute value like 'height' value. Then we use the relative values like.

height = height+200px; // Sample height="+=200px;" // Actual use in jQuery jQuery animation with increment in the current width and height. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="mybutton1">Click To Animate with relative video</button> <div id="mydiv1" style="background:#cd2828;height:100px; width:150px; position:relative;"> CodingPk Animate </div> <script> $("#mybutton1").click(function(){ $("#mydiv1").animate({ height: '+=100px',width: '+=100px' }); }); </script>

Output of jQuery animate() with increment in relative values

CodingPk Animate
jquery JQuery Designing Effects Chapter Next »