jQuery animate ()
The jQuery.animate() method is used to create custom animations on elements
by changing their CSS properties over a specified duration.
Syntax
$(selector).animate(properties, [duration], [easing], [complete]);
- properties(Required):A map of CSS properties and their corresponding values that will be animated. The values must be numeric, except for properties like color.
- duration(Optional):The time the animation will take to complete, in milliseconds. You can also use "slow", "fast", or a custom value (default is 400 milliseconds).
- easing(Optional):The easing function to use for the transition. The default is "swing", but you can also use "linear" or other easing functions if jQuery UI is included.
- complete(Optional):A callback function to be executed once the animation is finished.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery animate() Example</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<button id="animateBtn">Animate</button>
<div id="myDiv"></div>
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#myDiv").animate({
width:
"300px", // Increase width
height:
"200px", // Increase height
opacity:
0.5, // Change opacity
left:
"+=50px" // Move element 50px to the right
}, 2000); // Duration of
2 seconds
});
});
</script>
</body>
</html>
