How to do Animations with jQuery Animate Method

How to do Animations with jQuery Animate Method

The jQuery Animate.animate() helps you to create custom Animations on CSS properties.

jQuery Animate Syntax

The CSS properties to animate.
Effect duration in mill-seconds. You can also give “slow” or “fast”.
The callback function to run when the animation completes.

jQuery Animate a div to the right

Here I will add left CSS property on the div using jQuery Animate method.

This will create an animation effect when the div will move to the left.

<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> 
$("#div1").animate({ left: '250px' });

moving element left right with animate


jQuery Animate multiple properties

We can use any number of CSS properties in the .animate() method.

Here I am animating the div using 4 CSS properties – left, opacity, width & height.

<div id="div2" style="background:#ff21fa;height:100px;width:100px;position:absolute;"></div>
    left: '230px',
    opacity: '0.4',
    height: '130px',
    width: '130px'

animate multiple properties


jQuery Animate using “show”, “hide” or “toggle”

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' });

animate toggle


jQuery Animate – Speed Parameter

To add animation speed use either slow, fast or simple put the milliseconds. The below codes has animation speed – 5000 milli-seconds (equals to 5 seconds).

The code { width: ‘+=250px’ } tells to increase the element’s width by 250px.
<div id="div3" style="background:#adff7c;height:100px;width:100px;"></div>
$("#div3").animate({ width: '+=250px' }, 5000); 

animation with speed


jQuery Animate – animation queue

If you write multiple .animate() on an element then they will get queue up and will execute one by one.

So 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 });

animation queue


Share this article -



This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.