How to animate jQuery addClass/removeClass functions ? - GeeksforGeeks

21 May, 2021
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])
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])
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="https://code.jquery.com/jquery-3.6.0.min.js"            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="            crossorigin="anonymous">    </script>             <!-- JQuery UI CDN -->   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">   </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
jQuery-Methods
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?