The jQuery Animate – .animate() helps you to create custom Animations on CSS properties.
$(selector).animate({params},speed,callback)
Parameter | Description |
---|---|
Params | Required. The CSS properties to animate. |
Speed | Optional. Effect duration in mill-seconds. You can also give “slow” or “fast”. |
Callback | Optional. The callback function to run when the animation completes. |
Here I will add left CSS property on a div element using jQuery Animate method.
This will create an animation effect when the div will move to the left side.
<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> $("#div1").animate({ left: '250px' });
We can use any number of CSS properties with the .animate() method.
Here I am animating the div using 4 CSS properties which are left, opacity, width & height.
<div id="div2" style="background:#ff21fa;height:100px;width:100px;position:absolute;"></div> $("#div2").animate({ left: '230px', opacity: '0.4', height: '130px', width: '130px' });
We can even use the predefined values – show, hide or toggle with the .animate() method.
Here I am toggling the width and height of the div element on the button click event.
<div id="myDiv" style="background:#ff0000;height:100px;width:100px;"></div> <button id="myButton">Toggle</button> $("#myButton").click(function (e) { $("#myDiv").animate({ width: 'toggle', height: 'toggle' }); });
To add animation speed use either slow, fast or simple put the milliseconds. The below codes has animation speed of 5000 milli-seconds which is equals to 5 seconds.
<div id="div3" style="background:#adff7c;height:100px;width:100px;"></div> $("#div3").animate({ width: '+=250px' }, 5000);
If you write multiple .animate() on an element then they will get queue up and will execute one by one.
Now I am putting 4 .animate() methods on the div element. So these will execute one by one and bring amazing animation effects.
<div id="div5" style="background:#ffd800;height:100px;width:100px;"></div> $("#div5").animate({ width: '200px', height: '300px' }); $("#div5").animate({ width: '300px', height: '400px', opacity: 0.4 }); $("#div5").animate({ height: '100px' }); $("#div5").animate({ width: '100px', opacity: 1 });
In this example I will fly a Boomerang in the sky. Here I will also use the callback function of the .animate() method.
First I put a boomerang image in the ‘img’ tag.
Next I add a CSS class called ‘rotate’ whose work is only to rotate the boomerang continuously.
.rotate { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } }
Finally I add the animation code for flying the boomerang. This jQuery code is given below:
$("img").addClass("rotate"); $("img").animate({ left: '500px' }, 5000, function () { $(this).removeClass("rotate"); });
In the above code I add the rotate class to the boomerang image. Then I move the boomerang to 500px on the left in 5 seconds time. And finally when the callback function is called, I remove the rotate class from the boomerang image.
Check the demo or download the full source codes:
Share this article -