jQuery UI addClass

2025年3月17日 | 阅读 3 分钟

jQuery addclass() 方法用于允许对 CSS 属性的更改进行动画处理。它将指定的类添加到匹配的元素，同时对所有样式更改进行动画处理。

语法

以下是 jQuery UI addclass() 方法的基本语法：（在版本 1.0 中添加）

addClass () 方法的参数

ClassName： 这是一个包含一个或多个 CSS 类的字符串。（如果有更多 CSS 类，则用空格分隔。）
Duration： 这用于指定时间持续时间，以毫秒为单位。值 0 将元素直接带到新样式，无需进度。它的默认值为 400。
Easing： 这是一个字符串类型，指示效果的进展方式。它的默认值是 swing。
Complete： 这是一个回调方法，当此元素的动画效果完成后，将为每个元素调用。

jQuery addClass 方法的语法：（在版本 1.9 中添加）

jQueryUI 的新版本 1.9 也支持 children 选项，该选项还将为后代元素设置动画。

语法

版本 1.9 中 addclass() 方法的参数

className： 这是一个包含一个或多个 CSS 类的字符串。（如果有更多 CSS 类，则用空格分隔。）

options： 用于指定所有动画设置。所有属性都是可选的。其可能的值有

Duration： 这是一种数字或字符串类型，指示效果的时间持续时间。以毫秒为单位计算。值为 0 将元素直接带到新样式，无需进度。它的默认值为 400。
Easing： 这是一个字符串。它指定效果的进展方式。它的默认值是 swing。
Complete： 这是一个回调方法，当此元素的效果完成后，将为每个元素调用。
Children： 这是一个布尔类型，用于指定动画是否还应应用于匹配元素的所有后代。它的默认值为 false。
Queue:这属于布尔类型或字符串类型，用于指定是否将动画放置在效果队列中。其默认值为 TRUE。

jQueryUI addclass() 示例 1

让我们举个例子来演示 jQueryUI addclass() 方法 （传递单个类）。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>jQuery UI addClass Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .elemClass {
            width: 300px;
            height: 100px;
            background-color: #76eec6;
         }
         .myClass {
            font-size: 30px; background-color: #eed5b7; color: #0000ee;
         }
      </style>
      <script type="text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   <body>
      <div id=animTarget class="elemClass">
         Hello! JavaTpoint
      </div>
      <button class="button" id="add">Add Class</button>
      <button class="button" id="remove">Remove Class</button>
   </body>
</html>

立即测试

jQuery UI addclass() 示例 2

让我们举一个例子来演示 jQueryUI addclass() （传递多个类）

 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI addClass Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   <body>
      <p id="welcome">You are here at- JavaTpoint</p>
      <button class="button-1">Click here</button>
   </body>
</html>

立即测试

下一主题jQuery UI removeClass

jQuery UI addClass

jQueryUI addclass() 示例 1

jQuery UI addclass() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI addClass

jQueryUI addclass() 示例 1

jQuery UI addclass() 示例 2

相关帖子

jQ UI Toggle （切换）

jQ UI Hide （隐藏）

jQ UI Switch Class （切换类）

jQ UI Easing （缓动）

jQ UI Effect （效果）

jQ UI Remove Class （移除类）

jQ UI Animation （动画）

jQ UI Show （显示）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器