jQuery Animate Method

jQuery .animate() Method

The .animate() method in jQuery is a powerful tool that allows you to create custom animations by changing CSS properties over time. Unlike simpler methods like .fadeIn(), .fadeOut(), or .slideToggle(), .animate() gives you full control over the properties and animation behavior.

Syntax

$(selector).animate(properties, duration, easing, complete);

• properties: A map of CSS properties to animate, along with their target values.
• duration: (Optional) The length of the animation in milliseconds or predefined strings ("slow", "fast").
• easing: (Optional) The easing function to use for the transition. The default is "swing". Another option is "linear".
• complete: (Optional) A callback function to execute after the animation is complete.

Example: Basic Animation

$("button").click(function() {
    $("#myDiv").animate({ height: "toggle" });
});

In this example, clicking the button toggles the height of #myDiv.

Example: Animating Multiple Properties

$("button").click(function() {
    $("#myDiv").animate({
        width: "300px",
        height: "300px",
        opacity: 0.5
    }, 1000);
});

This example animates the width, height, and opacity of #myDiv over 1 second.

Example: Using Easing Functions

$("button").click(function() {
    $("#myDiv").animate({
        left: "250px"
    }, 1000, "linear");
});

This example moves #myDiv to the right by 250 pixels using a linear easing function.

Example: Callback Function

$("button").click(function() {
    $("#myDiv").animate({
        height: "300px"
    }, 1000, function() {
        alert("Animation complete!");
    });
});

This example shows an alert message after the animation completes.

Custom Animation Properties

• Relative Values: You can use += or -= to increase or decrease the current value.
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $("#myDiv").animate({

  left: "+=50px"

  });

  $("#myDiv").animate({ left: "+=50px" });

  $("#myDiv").animate({
      left: "+=50px"
  });
  

  Try It Now

• Queueing Animations: You can chain multiple .animate() calls to queue animations.
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $("#myDiv").animate({ left: "100px" })

  .animate({ top: "50px" });

  $("#myDiv").animate({ left: "100px" }) .animate({ top: "50px" });

  $("#myDiv").animate({ left: "100px" })
             .animate({ top: "50px" });
  

  Try It Now

   

Advanced Usage

1. Animating Colors: You can use plugins like jQuery UI to animate colors since jQuery’s .animate() method does not support color animation by default.
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   $("#myDiv").animate({ backgroundColor: "#ff0000" }, 1000);

   $("#myDiv").animate({ backgroundColor: "#ff0000" }, 1000);

   $("#myDiv").animate({ backgroundColor: "#ff0000" }, 1000);
   

   Try It Now

    

2. Stop Animation: Use .stop() to stop the animation before it completes.
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   $("#myDiv").stop();

   $("#myDiv").stop();

   $("#myDiv").stop();
   

   Try It Now

    

3. Queue Control: You can use .queue() to control the animation queue manually.
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   $("#myDiv").queue(function(next) {

   $(this).css("background-color", "blue");

   next(); // Moves to the next item in the queue

   });

   $("#myDiv").queue(function(next) { $(this).css("background-color", "blue"); next(); // Moves to the next item in the queue });

   $("#myDiv").queue(function(next) {
       $(this).css("background-color", "blue");
       next(); // Moves to the next item in the queue
   });
   

   Try It Now

    

Summary

The .animate() method in jQuery is a flexible way to create custom animations, providing control over multiple properties and allowing complex animations with smooth transitions.