jQuery Animation Effect
The jQuery animate() method is a way to create custom animations. The jQuery animate() method is used to animate numeric properties of CSS.
Syntax:
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.
callback: Callback is an optional parameter. It represents a function to be executed after the completion of the animate() method.
params: It defines the CSS properties to be animated.
Try Now
$(selector).animate({params}, speed, callback);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Click here to Start Animation</button>
<p>all the HTML elements are in static position by default and cannot be moved.
if you want to manipulate the position then remember to first set the CSS position property of
the element to fixed, absolute or relative!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>