jQuery animate()
If we want to add custom animation on html page. Then we use animate() in jQuery to add animations to the html page. Animate function take some arguments param, speed, callback. The param arguments take the CSS property and speed to define the delay time of the animation. The callback function are optional executes after the animate function is completed.
Syntax
$(selector).animate({params});
$(selector).animate({params}, speed);
$(selector).animate({params}, speed, callback);
The param argument is necessary but speed and callback are optional value.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('div').animate({
left: '350px',
opacity: '0.7',
height: '250px',
width: '350px',
fontSize: '85px',
top:'150px'
},1500);
});
});
</script>
</head>
<body>
<button>Start Animation</button><br /><br />
<div style='background:#98bf21;height:100px;width:100px;
position:absolute; text-align:center;'>
Zooming
</div>
</body>
</html>
