如何动画 jQuery addClass/removeClass 函数？

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

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

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

• addClass() 方法：用于在为所有样式更改设置动画时向每个目标元素添加指定的类。

  句法：

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

• removeClass() 方法：用于在为所有样式更改设置动画时从元素中删除类。

  句法：

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

示例：以下示例演示使用上述类的动画。我们使用setTimeout在动画之后删除类。

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;
      }
    
     
    
    
         
    
   
   
       
    
      $(document).ready(function () {
        $("#btn").click(function () {
          $("h2").addClass("geeks", 2000, myCallback);
        });
        function myCallback() {
          setTimeout(function () {
            $("h2").removeClass("geeks");
          }, 3000);
        }
      });
    


Welcome to GeeksForGeeks.

   Click to see the effect

输出：

动画效果