< Jquery Tutorial

Jquery Animation

← Previous Next →

The animate() Method

The jQuery animate() method is used to create custom animations.



Here, params parameter defines the CSS properties to be animated.

The speed parameter is optional and specifies the duration of the effect. It can be set as "slow" , "fast" or milliseconds.

The callback parameter is also optional and it is a function which is executed after the animation completes.

Let's take a simple example to see the animation effect.


<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
$(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '450px'}); }); }); </script>
<button>Start Animation</button>
<p>A simple animation example:</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

animate() - Manipulate Multiple Properties

Notice that multiple properties can be animated at the same time:

Example :

        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'

animate() - Using Relative Values

It is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value:


        left: '250px',
        height: '+=150px',
        width: '+=150px'

← Previous Next →