The jQuery .animate() method allows you to create custom animations on elements by changing their CSS properties over time. This tutorial covers different aspects of using the .animate() method with detailed explanations, examples, and useful tips.
You can use the .animate() method to animate CSS properties of an element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Basic</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({width: "300px"});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Width</button>
</body>
</html>
This example demonstrates how to animate the width of a div when a button is clicked using the .animate() method.
You can animate multiple CSS properties at once by specifying them in a properties map.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Multiple Properties</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({
width: "300px",
height: "200px"
});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; height: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Width and Height</button>
</body>
</html>
This example shows how to animate both the width and height of a div.
You can specify the duration for the animation to control how long it takes to complete.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Duration</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({width: "300px"}, 1000);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Width with Duration</button>
</body>
</html>
This example demonstrates how to animate a div with a specified duration.
You can use different easing functions to change the acceleration of the animation.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Easing</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({width: "300px"}, "slow", "easeOutBounce");
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Width with Easing</button>
</body>
</html>
This example shows how to use an easing function with the .animate() method.
You can execute a callback function after the animation is completed.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({width: "300px"}, "slow", function(){
alert("Animation complete.");
});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Width with Callback</button>
</body>
</html>
This example demonstrates how to execute a callback function after animating an element.
By default, jQuery animations are queued, meaning that they are executed one after the other. You can manage the animation queue to create complex sequences.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Queue</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
var div = $("div");
div.animate({width: "300px"});
div.animate({height: "200px"});
div.animate({opacity: 0.5});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; height: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Queue</button>
</body>
</html>
This example shows how to animate a div sequentially.
You can use relative values (+=, -=) to animate properties relative to their current values.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Relative Values</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({width: "+=50px"});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Width with Relative Values</button>
</body>
</html>
This example demonstrates how to animate a div's width relative to its current width.
Some non-numeric properties, such as colors, can also be animated using the .animate() method with plugins.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Non-Numeric Properties</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({backgroundColor: "#ff0000"});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate Background Color</button>
</body>
</html>
This example shows how to animate the background color of a div using the jQuery Color plugin.
You can use the .animate() method in conjunction with toggle functions to create custom toggle animations.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Toggle</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("div").animate({width: "toggle"});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="toggleButton">Toggle Width</button>
</body>
</html>
This example demonstrates how to toggle the visibility of a div with a custom animation.
You can combine the .animate() method with the .show() and .hide() methods to create custom show/hide animations.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Show/Hide</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("div").show().animate({width: "300px"});
});
$("#hideButton").click(function(){
$("div").animate({width: "100px"}).hide();
});
});
</script>
</head>
<body>
<div style="display:none; background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="showButton">Show and Animate</button>
<button id="hideButton">Animate and Hide</button>
</body>
</html>
This example shows how to animate the appearance and disappearance of a div.
You can create custom animation queues to control the order of animations.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Custom Queues</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
var div = $("div");
div.queue("custom", function(next){
$(this).animate({width: "300px"});
next();
});
div.queue("custom", function(next){
$(this).animate({height: "200px"});
next();
});
div.queue("custom", function(next){
$(this).animate({opacity: 0.5});
next();
});
div.dequeue("custom");
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; height: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate with Custom Queues</button>
</body>
</html>
This example demonstrates how to create and manage custom animation queues.
You can use the .delay() method to delay the start of an animation.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Delay</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").delay(2000).animate({width: "300px"});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate with Delay</button>
</body>
</html>
This example shows how to delay the start of an animation on a div.
You can use the step function to execute custom logic at each step of the animation.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Step Function</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({width: "300px"}, {
duration: 1000,
step: function(now, fx){
$("#stepValue").text("Width: " + now);
}
});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; width: 100px; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate with Step Function</button>
<p id="stepValue">Width: 100</p>
</body>
</html>
This example demonstrates how to use the step function to create a custom animation.
You can create custom properties and animate them using the .animate() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Custom Properties</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$.fx.step.custom = function(fx){
$(fx.elem).css("backgroundColor", "rgb(" + Math.floor(fx.now) + ",0,0)");
};
$("#animateButton").click(function(){
$("div").animate({custom: 255}, 1000);
});
});
</script>
</head>
<body>
<div style="background-color: rgb(0,0,0); padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate with Custom Properties</button>
</body>
</html>
This example shows how to create and animate custom properties on a div.
You can use CSS hooks to extend the properties that can be animated with the .animate() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - CSS Hooks</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script>
$(document).ready(function(){
$.cssHooks.backgroundColor = {
get: function(elem){
return $(elem).css("background-color");
},
set: function(elem, value){
$(elem).css("background-color", value);
}
};
$("#animateButton").click(function(){
$("div").animate({backgroundColor: "#ff0000"}, 1000);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="animateButton">Animate with CSS Hooks</button>
</body>
</html>
This example demonstrates how to use CSS hooks to animate custom properties.