jQuery Animate
The jQuery animate() method lets you create your own custom animations by gradually changing CSS properties over time. While methods like fadeIn() and slideDown() handle common effects for you, animate() puts you in full control so you can move, resize, and restyle elements exactly the way you want.
The animate() Method
At its core, animate() takes a set of CSS properties and smoothly transitions an element from its current values to the ones you specify. Instead of the change happening instantly, jQuery calculates the in-between frames for you, producing a fluid motion. The basic syntax is $(selector).animate({styles}, speed, callback), where only the styles object is required.
A simple move animation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="start">Start Animation</button>
<div style="position:relative; width:100px; height:100px; background-color:tomato;"></div>
<script>
$("#start").click(function(){
$("div").animate({left: '250px'});
});
</script>
</body>
</html>You are not limited to a single property. Pass several properties in the same object and jQuery animates all of them together, in parallel, over the same duration. This is handy when you want an element to move and change size or opacity at the same time.
Animating multiple properties at once
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="start">Start Animation</button>
<div style="position:relative; width:100px; height:100px; background-color:tomato;"></div>
<script>
$("#start").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
</script>
</body>
</html>Relative Values and Predefined Keywords
You can define values relative to the element's current value by prefixing the number with += or -=. jQuery also accepts the keywords 'show', 'hide', and 'toggle' for a property, which animates it to or from its natural value.
Using relative values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="start">Start Animation</button>
<div style="position:relative; width:100px; height:100px; background-color:tomato;"></div>
<script>
$("#start").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
</script>
</body>
</html>Queued Animations
jQuery keeps a queue of animations for each element. If you write several animate() calls one after another, they do not all run at once. Instead they run in sequence, each starting only after the previous one finishes. This makes it easy to build a step-by-step motion.
Chained (queued) animations
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="start">Start Animation</button>
<div style="position:relative; width:100px; height:100px; background-color:tomato;"></div>
<script>
$("#start").click(function(){
var box = $("div");
box.animate({height: '300px', opacity: '0.4'}, "slow");
box.animate({width: '300px', opacity: '0.8'}, "slow");
box.animate({height: '100px', opacity: '0.4'}, "slow");
box.animate({width: '100px', opacity: '0.8'}, "slow");
});
</script>
</body>
</html>Common animate() Parameters
Exercise: jQuery Animate
Which best describes what .animate() lets you do?
