The animate() method is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element.
Syntax:
(selector).animate({styles}, para1, para2, para3);Here “selector” is the selected element.
Parameter: It accepts four parameters which are specified below-
- Styles: It helps to set the new CSS property.
- para1: It is an optional parameter and is used to set the speed of the parameter and its default value is 400 milliseconds.
- para2: It is optional and this specifies the speed of the element at different positions.
- para3: It is an optional function that is used to be performed after the animation is complete.
Return Value: It returns the change made by using the above method.
Example 1: In this example, the parameter is not passed to this method.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<!--jQuery code to show animate() method-->
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#box").animate({
width: "300px"
});
$("#box").animate({
height: "300px"
});
});
});
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
#b1 {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- click on this button -->
<button id="b1">Click Here !</button>
</body>
</html>
|
Output:
Example 2: In this example, all the parameter is passed to this method.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<style>
div {
background-color: green;
height: 100px;
width: 100px;
margin-top: 10px;
}
#b1 {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- click here and animation will start -->
<button id="b1">Click Here !</button>
<!-- jQuery code to show the animate method -->
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#box").animate({
height: "200px",
width: "200px"
}, {
duration: 1000,
easing: "linear",
complete: function () {
$(this).after(
"<p>Reaches to maximum height and width !</p>");
}
});
});
});
</script>
</body>
</html>
|
Output:
