Effects/animate

From jQuery JavaScript Library

animate( params, [duration], [easing], [callback] )

A function for making your own, custom animations.

The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: "height", "top", or "opacity").

Note that properties should be specified using camel case eg. marginLeft instead of margin-left.

The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property. Only properties that take numeric values are supported (e.g. backgroundColor is not supported by animate()).

As of jQuery 1.2 you can now animate properties by em and % (where applicable). Additionally, in jQuery 1.2, you can now do relative animations - specifying a "+=" or "-=" in front of the property value to move the element positively, or negatively, relative to the current position.

Arguments:

params	Options
A set of style attributes that you wish to animate, and to what end.
duration (Optional)	String, Number
A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
easing (Optional)	String
The name of the easing effect that you want to use (Plugin Required). There are two built-in values, "linear" and "swing".
callback (Optional)	Function
A function to be executed whenever the animation completes, executes once for each element animated against.

Examples:

Demo
View Source

Click the button to animate the div with a number of different properties.

    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });

  });
  </script>
  <style>
  div { 
    background-color:#bca; 
    width:100px; 
    border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">» Run</button>
  <div id="block">Hello!</div>
</body>
</html>

Demo
View Source

Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

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

  });
  </script>
  <style>
  div { 
    position:absolute; 
    background-color:#abc; 
    left:50px;
    width:90px; 
    height:90px;
    margin:5px; 
  }
  </style>
</head>
<body>
  <button id="left">«</button> <button id="right">»</button>
<div class="block"></div>

</body>
</html>

Code

Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

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

Code

Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

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

Code

An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

$("p").animate({
      "opacity": "show"
    }, "slow", "easein");

Name	Type

[edit]

animate( params, options )

A function for making your own, custom animations.

Note that properties should be specified using camel case eg. marginLeft instead of margin-left.

Arguments:

params	Options
A set of style attributes that you wish to animate, and to what end.
options	Options
A set of options with which to configure the animation.

Options:

Name	Type
duration	String, Number	Default: "normal"
A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
easing	String	Default: "swing"
The name of the easing effect that you want to use (Plugin Required). There are two built-in values, "linear" and "swing".
complete	Function
A function to be executed whenever the animation completes, executes once for each element animated against.
step	Callback
Template:APICallback
queue	Boolean	Default: true
Setting this to false will make the animation skip the queue and will begin running immediately. (Added in jQuery 1.2)

Examples:

Demo
View Source

The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin.

The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

    $("#go1").click(function(){
      $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });

    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });

    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("#go1").click(function(){
      $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });

    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });

    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });

  });
  </script>
  <style>div { 
    background-color:#bca; 
    width:200px;
    height:1.1em;
    text-align:center;
    border:2px solid green;
    margin:3px;
    font-size:14px;
  }
  button {
    font-size:14px;
  }
  </style>
</head>
<body>
  <button id="go1">» Animate Block1</button>
  <button id="go2">» Animate Block2</button>
  <button id="go3">» Animate Both</button>
  <button id="go4">» Reset</button>
  <div id="block1">Block1</div>
  <div id="block2">Block2</div>
</body>
</html>

Code

Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

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

Code

Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.

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

Code

An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

$("p").animate({
      "opacity": "show"
    }, { "duration": "slow", "easing": "easein" });

Name	Type

jQuery: The Write Less, Do More JavaScript Library

Effects/animate

From jQuery JavaScript Library

animate( params, [duration], [easing], [callback] )

animate( params, options )

Views

Personal tools

Getting Started

API Reference

Plugins

Support

About jQuery

Search

Toolbox