jQuery Tutorial Tutorials - jQuery .animate()

The .animate() method in jQuery is used to perform a custorm animation.

jQuery .animate() syntax

.animate(properties[,duration][,easing][,complete]);

jQuery .animate() Examples

animate any element

example

animate different properties of the div element simultaneously:
HTML

<div id="clickme">
  Click here
</div>
<div id="container">
    <div id="block">Hello!</div>
</div>

jQuery

$("#clickme").click(function(){
    $("#block").animate({ 
        width: "300px",
        height: "250px", 
        left: "+=40",
        opacity: 0.8,
        borderWidth: 10
    }, 1000, function(){
        // Alert(Animation complete)
    });
});

Try now

example

move the element to left or right
HTML

<button id="left">left</button><button id="right">right</button>
<div id="block">Hello!</div>

jQuery

$("#right").click(function(){
    $(".block").animate({left: '+50px'}, "slow");
});

$("#left").click(function(){
    $(".block").animate({left: '-50px'}, "slow");
});

Try now

example

Animate all paragraphs to toggle both height and opacity within 600 milliseconds.

$("p").animate({
   height: 'toggle', opacity: 'toggle'
 }, "slow");

example

Animate all paragraphs to a left style of 50 and opacity of 1.

$( "p" ).animate({
  left: 50,  opacity: 1
}, 500 );