How to do Animations with jQuery Animate Method

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.