如何将jQuery的addClass或removeClass函数做成动画

在这篇文章中，我们将学习使用jQuery addClass()和removeClass()函数来制作动画。

我们将使用jQuery和jQuery UI。 UI（用户界面）是免费的开源软件，它建立在强大的jQuery核心库之上。如果你想使用jQuery UI，你也必须包含jQuery。jQuery UI提供了更多的功能，如添加类，颜色动画和缓和等。

我们将使用一些jQuery UI的addClass()和removeClass()方法。

addClass()方法。它被用来给每个目标元素添加指定的类，同时对所有的样式变化进行动画处理。

语法:

.addClass(className, [duration], [easing], [callback])

removeClass()方法。它被用来从元素中移除类，同时对所有的样式变化进行动画处理。

语法:

.removeClass(className, [duration], [easing], [callback])

例子：下面的例子演示了使用上述类的动画。我们使用setTimeout来删除动画后的类。

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