jQuery Effects - Animation
jQuery Animations - The animate() Method
The jQuery animate() function is employed to make your own special animations.
Syntax:
$(selector).animate({params},speed,callback);
The "required params" parameter specifies which CSS properties should be animated.
You can set how fast or slow an effect happens using the "speed" option. You can choose from "slow," "fast," or specify the time in milliseconds.
The "optional callback parameter" is a special instruction for the computer to follow after the animation ends.
In this example, we'll show you how to use the animate() method in a straightforward way. This method is used to make a <div> element move to the right until it reaches a position 250 pixels from the left.
Normally, HTML elements stay in one place and don't move on their own.
To change the position, first set the CSS position property of the element to relative, fixed, or absolute.
jQuery animate() - Manipulate Multiple Properties
You can animate several properties simultaneously.
Can the animate() method change every CSS property?
Yes, almost! Remember this: when using the animate() method, all property names must be in camel case. For example, use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
Color animation isn't part of the main jQuery library.
To animate color, download the
Color
Animations plugin from jQuery.com.
jQuery animate() - Using Relative Values
You can use relative values to define an element's new value in relation to its current value. To do this, simply add += or -= in front of the desired value.
jQuery animate() - Using Pre-defined Values
You can set how a property should animate by using values like "show", "hide", or "toggle".
jQuery animate() - Uses Queue Functionality
Normally, jQuery includes a built-in feature for managing animation sequences.
This means that when you use the animate() function multiple times in a row, jQuery puts these calls in a special list. It then carries out these animations one after the other.
If you want to make various animations happen one after the other, you can use the queue feature like this in your code:
The following example shifts the <div> element to the right and then makes the text's font size bigger:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
left: '250px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements are fixed in their position and cannot be moved. To change the position, you need to set the CSS position property of the element to relative, fixed, or absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements are fixed in their position and cannot be moved. To change the position, you need to set the CSS position property of the element to relative, fixed, or absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements are fixed in their position and cannot be moved. To change the position, you need to set the CSS position property of the element to relative, fixed, or absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<p>Click the button multiple times to toggle the animation.</p>
<button>Start Animation</button>
<p>By default, all HTML elements are fixed in their position and cannot be moved. To change the position, you need to set the CSS position property of the element to relative, fixed, or absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var div = $("div");
div.animate({
height: '300px',
opacity: '0.4'
}, "slow");
div.animate({
width: '300px',
opacity: '0.8'
}, "slow");
div.animate({
height: '100px',
opacity: '0.4'
}, "slow");
div.animate({
width: '100px',
opacity: '0.8'
}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements are fixed in their position and cannot be moved. To change the position, you need to set the CSS position property of the element to relative, fixed, or absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var div = $("div");
div.animate({
left: '100px'
}, "slow");
div.animate({
fontSize: '3em'
}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements are fixed in their position and cannot be moved. To change the position, you need to set the CSS position property of the element to relative, fixed, or absolute.</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
HTML
CSS
Javascript
Jquery