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

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.

jquery animate boomerang example

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.

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.