Skip to content
Related Articles

Related Articles

How to animate jQuery addClass/removeClass functions ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 21 May, 2021
Improve Article
Save Article

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.


    .addClass(className, [duration], [easing], [callback])
  • removeClass() method: It is used to remove the classes from the element while animating all style changes.


    .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.


<!DOCTYPE html>
      #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;
     <!--  JQuery CDN  -->
    <script src=
    <!-- JQuery UI CDN -->
   <script src=
      $(document).ready(function () {
        $("#btn").click(function () {
          $("h2").addClass("geeks", 2000, myCallback);
        function myCallback() {
          setTimeout(function () {
          }, 3000);
<h2>Welcome to GeeksForGeeks.</h2>
<button id="btn">
   Click to see the effect</button>


animation effect

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!