Documentation

Effects/animate

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[edit]

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

A function for making 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, e.g. "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).

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 moves the element positively or negatively, relative to its current position.
Arguments:


paramsOptions
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:
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="http://code.jquery.com/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>

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="http://code.jquery.com/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>

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

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

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

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

NameType


[edit]

animate( params, options )

A function for making 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 (e.g. "height", "top", or "opacity").

Note that properties should be specified using camel case, e.g. "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.
Arguments:
paramsOptions
A set of style attributes that you wish to animate, and to what end.
optionsOptions
A set of options with which to configure the animation.

Options:
NameType
durationString, NumberDefault: "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).
easingStringDefault: "swing"
The name of the easing effect that you want to use (plugin required). There are two built-in values, "linear" and "swing".
completeFunction
A function to be executed whenever the animation completes, executes once for each element animated against.
stepCallback
queueBooleanDefault: true
Setting this to false will make the animation skip the queue and begin running immediately. (Added in jQuery 1.2)
Examples:
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="http://code.jquery.com/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>

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

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

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

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

An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.

$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );


NameType

Retrieved from "http://docs.jquery.com/Effects/animate"