How to do Animations with jQuery Animate Method

Last Updated: June 4, 2021

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

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

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

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

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

jQuery Animate Example – Flying Boomerang

In this example I will fly a Boomerang in the sky. Here I will also use the callback function of the .animate() method.

First I put a boomerang image in the ‘img’ tag.

Next I add a CSS class called ‘rotate’ whose work is only to rotate the boomerang continuously.

.rotate {
    -webkit-animation: rotation 2s infinite linear;
}
 
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
 
    to {
        -webkit-transform: rotate(359deg);
    }
}

Finally I add the animation code for flying the boomerang. This jQuery code is given below:

$("img").addClass("rotate");
$("img").animate({
    left: '500px'
}, 5000, function () {
    $(this).removeClass("rotate");
});

In the above code I add the rotate class to the boomerang image. Then I move the boomerang to 500px on the left in 5 seconds time. And finally when the callback function is called, I remove the rotate class from the boomerang image.

Download the full source codes:

DOWNLOAD

Next tutorial – Multiple ways of using jQuery On Method – .on() – in your Website