How to do Animations with jQuery Animate Method

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

jQuery Animate Syntax

$(selector).animate({params},speed,callback)

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

DEMO

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>
$("#div2").animate({
    left: '230px',
    opacity: '0.4',
    height: '130px',
    width: '130px'
});

DEMO

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

DEMO

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).

<div id="div3" style="background:#adff7c;height:100px;width:100px;"></div>
$("#div3").animate({ width: '+=250px' }, 5000); 

DEMO

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

DEMO DOWNLOAD