jQuery Effect animate() Method

Quiz

The animate() method in jQuery is used to perform custom animations on selected elements. It allows you to animate CSS properties of elements, such as width, height, opacity, and more, over a specified duration and with a specified easing function.

Animations in jQuery can only manipulate numeric values, such as "margin: 30px". String values like "background-color: red" cannot be animated, unless they are specific strings like "show", "hide", and "toggle", which control the visibility of the animated element.

Syntax

Following is the syntax of animate() method in jQuery −

(selector).animate({styles},speed,easing,callback)

Parameters

This method accepts the following parameters:

{styles}: An object containing CSS properties and values that you want to animate.
Note: We need to provide the property names in camel-case with this animate() method. For example, we will need to write paddingRight instead of padding-right.
speed (optional): The duration of the animation in milliseconds. Default value is 400 milliseconds.
easing (optional): Specifies the speed of the element in different points of the animation. Default is "swing".
callback (optional): A function to be executed after the animation completes.

Example 1

In the following example, we are animating an element "<div>", by changing it's width and height animated to 1000 milliseconds (1 second) −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#animateBtn").click(function(){
        $("div").animate({
            width: "200px",
            height: "200px",
        }, 1000);
    });
});
</script>
</head>
<body>
<button id="animateBtn">Animate</button>
<div style="background-color: #40a944; 
   width: 100px; 
   height: 100px; 
   border-radius: 50%;">
</div>
</body>
</html>

After clicking on the "Animate" button, the element <div> will be animated.

Example 2

In the following example, we are using the animate() method with a callback function −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#animateBtn").click(function(){
        $("div").animate({
            width: "200px",
            height: "200px",
        }, 1000, "swing", function(){
            alert("Animation Completed!");
        });
    });
});
</script>
</head>
<body>
<button id="animateBtn">Click to Animate</button>
<div style="background-color: red; 
    width: 110px; 
    height: 100px;
    border-radius: 50%;">
</div>
</body>
</html>

When we click on the button, the <div> elements' height and width will be animated over a duration of 1000 milliseconds (1 second). After the animation completes, an alert will be shown with the message "Animation Completed!".

Alternate Syntax

Following is the alternate syntax of JavaScript Effect animate() method −

(selector).animate({styles},{options})

Parameters

Following are the parameters this method takes:

{styles}: An object containing CSS properties and values that you want to animate.
{options} (optional): An object containing additional options for the animation. The possible value could be duration, easing, complete, step, progress, queue, specialEasing, start, done, fail, and always. Also a callback function to execute when the animation completes.

Example 3

Here, we are using the animate() method on the <div> element with id "#box" to animate its width to 200 pixels and its opacity to 0.5 over a duration of 1000 milliseconds (1 second) −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    #box {
        width: 60px;
        height: 50px;
        background-color: blue;
        margin: 50px;
    }
</style>
</head>
<body>
<!-- HTML element to be animated -->
<div id="box"></div>

<script>
$(document).ready(function(){
    // Animate the width and opacity of the element with id "box"
    $("#box").animate({
        width: "1100px",
        opacity: 0.5
    }, 1000); // Animation duration: 1000 milliseconds
});
</script>
</body>
</html>

After executing the above program, the element <div> will be animated.

jquery_ref_effects.htm

Print Page