jQuery Effects Animation - The animate() Method

You can generate your custom animations with jQuery.

You can also search for these topics, easing jquery animation effects for websites, images appears, list out all animation effects using jquery, menu and demo animation effects, background animation effects.

jQuery Animations - The animate() Method

To make custom animations, utilise the jQuery animate() function.

Syntax :-

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

The params argument is mandatory. The speed and callback parameters are optional.

The CSS attributes to be animated are defined by the required params option.

The duration of the effect is determined by the speed parameter. The supported values are "Slow", "Fast", or milliseconds.

The callback parameter specifies a function that will be run once the animation is finished.

Example :- A basic use of animation shows this example; it moves a div element to the right until the CSS left property is 250px.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            $("#div1").animate({ left: '500px' });
        });
    });
</script> 
</head>
<body>

<button id="b1">Start Animation</button><br /><br />

<div id="div1" style="background:#98bf21;height:50px;width:50px;position:absolute;"></div>

<br /><br />
</body>
</html>

Output :-

Note:- All HTML elements have a fixed position that cannot be changed by default.

Remember to set the element's CSS position attribute to relative, fixed, or absolute before manipulating the position.

You can also search for these topics, jquery animations floating the animate method, use of background color, animate method callback, how to call the animate method using jquery animations, properties, syntax and example for jquery animate method.

jQuery animate() - Manipulate Multiple Properties

You can use more than one CSS attribute to animate an HTML element. It's worth noting that you may animate many attributes at the same time.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b3").click(function () {
            $("#div3").animate({
                left: '500px',
                opacity: '0.3',
                height: '80px',
                width: '80px'
            });
        });
    });
</script> 
</head>
<body>

<button>Start Animation</button>

<div style="background:#98bf21;height:50px;width:50px;position:absolute;"></div>
<br /><br /><br /><br />
</body>
</html>

Output :-

Is it feasible to use the animation() technique to change ALL CSS properties?

Yeah, nearly! But it is crucial to remember: while using the animate() function, all property names must be camel-cased: Instead of padding-left, you have to type paddingLeft, marginRight rather than margin-right.

The basic jQuery library also does not feature colour animation. You need to get the Color Animations plugin from jQuery.com if you wish to animate colour.

You can also search for these topics, how to manipulate multiple properties at once with jquery animate, dynamically works jquery animate() multiple properties, execute the jquery sequentially animate multiple elements, jquery animate() - manipulate multiple properties html and file, example.

jQuery animate() - Using Relative Values

Relative values can also be defined (the value is then relative to the element's current value). This is accomplished by placing += or -= in front of the value :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b5").click(function () {
            $("#div5").animate({
                left: '+=100px',
                height: '+=30px',
                width: '+=70px'
            });
        });
    });
</script> 
</head>
<body>

<button id="b5">Start Animation</button><br /><br />

<div id="div5" style="background:#98bf21;height:50px;width:50px;position:absolute;"></div>

<br /><br /><br /><br />

</body>
</html>

Output :-

You can also search for these topics, using relative values attribute in jquery animate() example, dynamically execute jquery animate() using relative values, list the relative values using jquery animate(), give multiple values to jquery animate() using relative values, execution of animate() using relative values property and elements with jquery.

jQuery animate() - Using Pre-defined Values

You may even use the terms "display", "hide", or "toggle" to describe the animation value of a property :

You can also search for these topics, using pre-defined values data in jquery animate(), get the jquery animate() using pre-defined values, jquery animate() - using pre defined values html example.

jQuery animate() - Uses Queue Functionality

jQuery includes animation queue capabilities by default.

This implies that with these method calls, jQuery generates a "internal" queue if you write several animate() calls each other. The animated calls are then executed ONE by ONE.

So we take advantage of the queue capability if you want to make various animations from one another.

Example 1:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b7").click(function () {
            var div = $("#div7");
            div.animate({ height: '120px', opacity: '0.6' }, "slow");
            div.animate({ width: '120px', opacity: '0.3' }, "slow");
            div.animate({ fontSize: '3em' }, "slow");
            div.animate({ height: '80px', opacity: '0.7' }, "slow");
        });
    });
</script> 
</head>
<body>

<button id="b7">Start Animation</button><br /><br />
<div id="div7" style="background:#98bf21;height:50px;width:50px;position:absolute;"><b>Hello</b></div>
<br /><br /><br /><br />

</body>
</html>

Output :-

Hello

You can also search for these topics, dynamically works the jquery animate() uses queue functionality, how to use jquery animate() uses queue functionality, list the animate() uses queue functionality, queue functionality of ajax data in jquery animate() method, jquery animate() queue example.