jQuery Animation

To build custom animations, utilize the jQuery animate() function. The animation() method is commonly used to animate numeric CSS attributes like as width, height, margin, padding, opacity, top, left, and so on, however non-numeric properties such as color or background-color cannot be animated using basic jQuery capability.

Not all CSS attributes can be animated. In general, every CSS attribute that supports numerical, length, percentage, or color values is animatable. The color motion, however, is not supported by the core jQuery framework. The jQuery color plugin may be used to alter and animate the color.

Syntax

$(selector).animate({ properties }, duration, callback);

The animation() method's arguments have the following meanings:

The CSS properties to be animated are defined by the necessary properties argument.
The duration argument, which is optional, indicates how long the animation will run. Durations can be supplied either as a string ('slow' or 'fast') or as a number of milliseconds; greater values imply slower animations.
The optional callback argument specifies a function to be called after the animation is finished.

On the click of a button, the jQuery animate() function animates an image from its original location to the top by 200 pixels.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        p { position: relative; }
    </style>
</head>
<body>

<h1>Animation Method</h1>
<button class="btnAnimation">Start Animation</button>
<p>This is a paragraph.</p>

<script>
    $(document).ready(function(){
        $(".btnAnimation").click(function(){
            $("p").animate({ top: 200 });
        });
    });
</script>
</body>
</html>

Preview

Animate Multiple Properties at the Same Time

You can also use the animation() function to animate several attributes of an element at the same time. All of the attributes are animated at the same time, with no lag.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .circle {
            width: 75px;
            height: 75px;
            background: #00ab55;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<h1>Multiple Properties Animation</h1>
<button class="btnAnimation">Start Animation</button><br><br>
<div class="circle"></div>

<script>
    $(document).ready(function(){
        $(".btnAnimation").click(function(){
            $(".circle").animate({
                width: "150px",
                height: "150px",
                borderRadius: "10%",
            });
        });
    });
</script>
</body>
</html>

Preview

Animate Several Properties performed one at a time or in a queue

Using jQuery's chaining functionality, you may also separately animate the numerous attributes of an element in a queue. In the following chapter, we'll learn more about chaining. The following example shows a jQuery queued or chained animation, in which each animation begins after the previous animation on the element has finished.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .circle {
            width: 75px;
            height: 75px;
            background: #ffc107;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<h1>Queued Animation</h1>
<button class="btnAnimation">Start Animation</button><br><br>
<div class="circle"></div>

<script>
    $(document).ready(function(){
        $(".btnAnimation").click(function(){
            $(".circle")
                .animate({ width: "150px"})
                .animate({ height: "150px"})
                .animate({ borderRadius: "10%"});
        });
    });
</script>
</body>
</html>

Preview

Use Relative Values to Animate Properties

The relative values for the animation attributes can also be specified. If a value is prefixed with a leading += or -=, the target value is determined by adding or removing the supplied number from the property's current value.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .circle {
            width: 75px;
            height: 75px;
            background: #ff4842;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<h1>Animation with Relative Values</h1>
<button class="btnAnimation">Start Animation</button><br><br>
<div class="circle"></div>

<script>
    $(document).ready(function(){
        $(".btnAnimation").click(function(){
            $(".circle").animate({
                width: "+=50px",
                height: "+=50px"
            })
        });
    });
</script>
</body>
</html>

Preview

Animate Predefined Value Properties

Each property can accept the strings 'show', 'hide', and 'toggle' in addition to numeric values. It will come in handy when you only want to animate the property from its current value to its original value and vice versa.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .circle {
            width: 250px;
            height: 100px;
            background: #1890ff;
        }
    </style>
</head>
<body>

<h1>Animation with Pre-defined Values</h1>
<button class="btnAnimation">Toggle Animation</button><br><br>
<div class="circle"></div>

<script>
    $(document).ready(function(){
        $(".btnAnimation").click(function(){
            $(".circle").animate({
                width: 'toggle'
            })
        });
    });
</script>
</body>
</html>

Preview

FAQs

jQuery's animate() method allows you to create custom animations by manipulating CSS properties of selected elements. You can animate properties such as width, height, opacity, and more. For example, $('.my-element').animate({ opacity: 0.5, width: '200px' }, 1000) animates elements with the class "my-element" to have an opacity of 0.5 and a width of 200 pixels over a 1-second duration. By specifying the target values for CSS properties and the duration of the animation, you can achieve smooth and visually appealing effects. The animate() method also supports additional parameters like easing functions and callback functions, providing further flexibility in creating interactive and dynamic animations on your web page.

Yes, jQuery's animate() method allows you to chain multiple animations together, creating sequential or simultaneous effects. You can chain animations by invoking the animate() method on the same set of elements consecutively. For example, $('.my-element').animate({ opacity: 0.5 }, 500).animate({ left: '200px' }, 1000) would first animate the opacity of elements with the class "my-element" to 0.5 over a 500-millisecond duration and then animate their left position to 200 pixels over a 1-second duration. This chaining capability enables you to create complex animation sequences, where each animation starts when the previous one completes. By combining different CSS properties and durations, you can achieve dynamic and engaging visual effects on your web page.

Yes, jQuery's animate() method supports various easing effects to control the acceleration and deceleration of animations. Easing effects determine how an animation progresses over time, affecting its speed and smoothness. jQuery provides several pre-defined easing options such as "linear", "swing", "easeInQuad", "easeOutCubic", and more. For example, $('.my-element').animate({ opacity: 0.5 }, 1000, 'easeOutElastic') would animate the opacity of elements with the class "my-element" over a 1-second duration using the "easeOutElastic" easing function. Additionally, you can create custom easing functions using the jQuery UI library. By choosing different easing effects, you can add personality and style to your animations, creating more visually appealing and interactive experiences for your web page visitors.

jQuery Slide

jQuery Stop

jQuery Animation

Syntax

Example

Animate Multiple Properties at the Same Time

Example

Animate Several Properties performed one at a time or in a queue

Example

Use Relative Values to Animate Properties

Example

Animate Predefined Value Properties

Example

FAQs

Links

Tutorials

Connect with us

jQuery Animation

Syntax

Example

Animate Multiple Properties at the Same Time

Example

Animate Several Properties performed one at a time or in a queue

Example

Use Relative Values to Animate Properties

Example

Animate Predefined Value Properties

Example

FAQs

How can I use jQuery's animate() method to create custom animations?

Can I chain multiple animations using jQuery's animate() method?

Can I use jQuery's animate() method to create easing effects?