How to animate jQuery addClass/removeClass functions ?
In this article, we will learn to animate using jQuery addClass() and removeClass() functions.
We are going to use jQuery and jQuery UI. jQuery UI (User Interface) is free and open-source software that is built on top of the core powerful jQuery library. If you want to use jQuery UI, you must include jQuery too. jQuery UI provides more features like add Class, color animation and easing, etc.
We are going to use some jQuery UI addClass() and removeClass() methods.
-
addClass() method: It is used to add specified classes to each of the targeted elements while animating all style changes.
Syntax:
.addClass(className, [duration], [easing], [callback])
-
removeClass() method: It is used to remove the classes from the element while animating all style changes.
Syntax:
.removeClass(className, [duration], [easing], [callback])
Example: The following example demonstrates animation using the above classes. We are using setTimeout to remove the class after the animation.
HTML
<!DOCTYPE html> <html> <head> <style> #btn { padding: 10px 8px; color: green; background-color: rgba(122, 122, 122, 0.322); border-radius: 12px; } .geeks { font-size: 40px; color: green; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-shadow: 2px 2px 4px #880a0a; letter-spacing: 2px; } </style> <!-- JQuery CDN --> <script src= integrity= "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <!-- JQuery UI CDN --> <script src= </script> <script> $(document).ready(function () { $("#btn").click(function () { $("h2").addClass("geeks", 2000, myCallback); }); function myCallback() { setTimeout(function () { $("h2").removeClass("geeks"); }, 3000); } }); </script> </head> <body> <h2>Welcome to GeeksForGeeks.</h2> <button id="btn"> Click to see the effect</button> </body> </html> |
Output:
animation effect
Please Login to comment...