jQuery Effect - Animation

The jQuery animate() method allows you to create custom animations.

Effect Demonstration



jQuery

jQuery Animation - animate() Method

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

Syntax:

$(selector).animate({params},speed,callback);

Required params The parameter defines the CSS properties that form the animation.

Optional speed The parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after the animation is completed.

The following example demonstrates a simple application of the animate() method; it moves the <div> element to the left until the left property is equal to 250 pixels:

Example

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Try it yourself

Tip:By default, all HTML elements have a static position and cannot be moved.

If you need to manipulate the position, remember to set the CSS position property of the element to relative, fixed, or absolute first!

jQuery animate() - Manipulating multiple properties

Please note that you can use multiple properties at the same time during the animation process:

Example

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Try it yourself

Tip:Can the animate() method be used to manipulate all CSS properties?

Yes, almost! However, remember an important thing: when using animate(), all property names must be written in CamelCase, such as, use paddingLeft instead of padding-left, use marginRight instead of margin-right, and so on.

At the same time, color animations are not included in the core jQuery library.

If you need to generate color animations, you need to download the Color Animations plugin from jQuery.com.

jQuery animate() - Using Relative Values

You can also define relative values (the value is relative to the current value of the element). You need to add += or -= in front of the value:

Example

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Try it yourself

jQuery animate() - Using Predefined Values

You can even set the animated value of the property to "show", "hide", or "toggle":

Example

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Try it yourself

jQuery animate() - Using Queue Feature

By default, jQuery provides a queue feature for animations.

This means that if you write multiple animate() calls one after another, jQuery will create an 'internal' queue containing these method calls. Then it runs these animate calls one by one.

Example 1

To hide, if you want to perform different animations one after another, we need to use the queue feature:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

Try it yourself

Example 2

The following example moves the <div> element to the right and then increases the text size:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Try it yourself