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

moving element left right with animate

DEMO

You can quite easily use the .animate() method on the jQuery Timer example which I created in one of my previous tutorial.

jQuery Animate multiple properties

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

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

Selecting elements in the DOM can be sometimes difficult but luckily jQuery Parent Method is there to make this task easy for us.

jQuery Animate – Speed Parameter

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.

Remember: 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.

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

Check the demo or download the full source codes:

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.