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().
$("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.
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>
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>