jQuery Effects Animation - The animate() Method
You can generate your custom animations with jQuery.
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.
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.
Related Links
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 :-
jQuery animate() - Using Pre-defined Values
You may even use the terms "display", "hide", or "toggle" to describe the animation value of a property :
Related Links
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 :-