jQuery Animation Effects

The jQuery animate() method provides you a way to create custom animations. It is a wrapper method, meaning that it operates on a set of previously selected DOM elements , wrapped by jQuery. This method allows you to apply your own custom animation effects to the elements in the set. This method can be used in various ways, accepting unlimited parameters which specify what CSS properties should be affected, as well as duration and a callback function . Syntax
$(selector).animate({parameters},duration,callback);
  1. parameters: CSS properties to be animated.

  2. speed: Duration of the effect (optional).

  3. callback: function which is executed after the animation completes.
It is important to note that, by default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute.
$("div").animate({right: '500px'});
<div style="padding: 25px;background: red;width:10%;position:absolute;"> jQuery Animation </div>
run this source code Browser View
jQuery Animation






Full Source
<html> <head> <title>jQuery Animation</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("div").animate({right: '500px'}); }); }); </script> </head> <body> <div style="padding: 25px;background: red;width:10%;position:absolute;"> jQuery Animation </div> <br><br><br><br> <button>Start Animation</button> </body> </html>

jQuery animate() using multiple properties

$("div").animate({ left: '300px', opacity: '0.5' });
<div style="padding: 25px;background: red;width:10%;position:absolute;"> jQuery Animation </div>
run this source code Browser View
jQuery Animation






Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("div").animate({ left: '300px', opacity: '0.5' }); }); }); </script> </head> <body> <div style="padding: 25px;background: red;width:10%;position:absolute;"> jQuery Animation </div> <br><br><br><br> <button>Start Animation</button> </body> </html>

jQuery animate() using Relative Values

run this source code Browser View
jQuery Animation








Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#bigger").click(function(){ $("div").animate({ height: '+=50px', width: '+=50px' }); }); $("#smaller").click(function(){ $("div").animate({ height: '-=50px', width: '-=50px' }); }); }); </script> </head> <body> <div style="padding: 25px;background: red;width:10%;position:absolute;"> jQuery Animation </div> <br><br><br><br><br><br> <button id="bigger">Bigger</button> <button id="smaller">Smaller</button> </body> </html>