animate() MethodThe jQuery animate() method is utilized to create customized animations. It's commonly used to animate numeric CSS properties such as width, height, margin, padding, opacity, top, left, and so on. However, non-numeric properties like color or background-color cannot be animated using basic jQuery functionality.
Note: Not all CSS properties can be animated. Typically, properties that accept numerical values, lengths, percentages, or colors are animatable. However, color animation is not supported by the core jQuery library. To manipulate and animate colors, you can use the jQuery color plugin.
The basic syntax of the jQuery animate() method is as follows:
The parameters of the animate() method are defined as:
properties parameter specifies the CSS properties to be animated.duration parameter determines how long the animation will run. Durations can be specified using predefined strings like 'slow' or 'fast', or in milliseconds, where higher values indicate slower animations.Here's a straightforward example of the jQuery animate() method: it animates an image to move 300 pixels to the right when a button is clicked.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
Note: By default, all HTML elements have a static position. Static elements cannot be moved, so you need to set the CSS position property of the element to relative, fixed, or absolute to manipulate or animate its position.
You can animate multiple properties of an element simultaneously using the animate() method. All specified properties will be animated together without any delay.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>
Note: When using the animate() method, CSS property names must be camel-cased. For example, to animate the font size, use 'fontSize' instead of 'font-size'. Similarly, use 'marginLeft' instead of 'margin-left', 'borderWidth' instead of 'border-width', and so on.
Tip: Before animating the border-width property of an element, ensure you set the border-style property. An element must have borders defined because the default value of the border-style property is none.
You can also animate multiple properties of an element individually in a sequential queue using jQuery's chaining feature. We'll cover more about chaining in the next chapter.
The following example illustrates a jQuery queued or chained animation, where each animation begins once the previous animation on the element has finished.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>You can also specify relative values for animated properties. If a value is prefixed with += or -=, the target value is calculated by adding or subtracting the specified number from the current value of the property.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>In addition to numeric values, each property can also accept the strings 'show', 'hide', and 'toggle'. This feature is useful when you want to animate a property from its current value to its initial value or vice versa.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>