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

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

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

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

animate multiple properties

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

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

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

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

animation queue

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

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