JQuery animation is used to create custom animation on web page.JQuery animation function is very powerful API for manipulating html elements and adding animation functionality.The syntax of jquery animation is explained to you below.
jQuery animate() Method, jQuery Animation Effects, jQuery Animation Color, jQuery animate() Method with Example
Syntax:-
$(selector).animate({params}, speed, callback);
This defines the properties of the css to be animated in the parameter.
And it specifies the duration of the effect and the speed parameter is optional.It can be set as “slow”, “fast” or milliseconds.After the completion of the animation there is a function to execute the optional callback parameter.
JQuery animate() Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({bottom: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<h2>JQuery animate() Example</h2>
<div style="background:blue;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
jQuery animate() – Manipulate Multiple Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '350px',
opacity: '0.5',
height: '250px',
width: '250px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<h2>jQuery animate() - Manipulate Multiple Properties</h2>
<div style="background:blue;height:100px;width:100px;position:absolute;"></div>
</body>
</html>