jQuery Animation Effects

By: Rajesh P.S.

The jQuery animate() method empowers developers to craft bespoke animations by customizing various aspects of element manipulation. As a wrapper function, it operates on a preselected group of DOM elements encapsulated within jQuery. This method provides the flexibility to apply personalized animation effects to these elements, utilizing an array of parameters to define targeted CSS properties, duration, and even callback functions. This comprehensive approach facilitates versatile and tailored animation solutions, enriching the visual and interactive dimensions of web interfaces.

Syntax

$(selector).animate({parameters},duration,callback);

parameters: CSS properties to be animated.
speed: Duration of the effect (optional).
callback: function which is executed after the animation completes.

Continue Reading...

A crucial point to consider is that, as a default behavior, all HTML elements possess a static position, rendering them immovable. To enable position manipulation, it's imperative to initially define the CSS position property of the element as relative, fixed, or absolute, thereby granting the necessary flexibility for repositioning.

$("div").animate({right: '500px'});

<div style="padding: 25px;background: red;width:10%;position:absolute;"> jQuery Animation </div>

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>

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

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>

Conclusion

jQuery's animation prowess is exemplified by the animate() method, enabling developers to craft custom animations for selected DOM elements. By modifying CSS properties, duration, and incorporating callback functions, this method empowers the creation of tailored visual effects. Remember, altering the position of elements necessitates setting the CSS position property to relative, fixed, or absolute for effective manipulation.

Next > jQuery queue(), dequeue() and clearQueue()

Related Topics

More Related Topics.....