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

Try It Now

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

Try It Now

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

Try It Now

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

Try It Now

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. 
    $("#myDiv").animate({
    left: "+=50px"
});

    Try It Now

  • Queueing Animations: You can chain multiple .animate() calls to queue animations. 
    $("#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. 
    $("#myDiv").animate({ backgroundColor: "#ff0000" }, 1000);

    Try It Now

     

  2. Stop Animation: Use .stop() to stop the animation before it completes. 
    $("#myDiv").stop();

    Try It Now

     

  3. Queue Control: You can use .queue() to control the animation queue manually. 
    $("#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.