jQuery UI | addClass() 方法

介绍

jQuery UI是一套基于jQuery的用户界面控件库，它为网页开发提供了丰富的交互效果和可重用的UI组件，能够轻松创建高质量用户界面。其中addClass()方法是jQuery UI提供的一个集合类动画效果方法之一。

addClass() 方法

addClass()方法可以为指定的元素添加一个或多个类，同时可以在动画效果下添加类。该方法可以通过两种形式实现：

1. 给定类名字符串，例如$(selector).addClass(className)。
2. 通过函数返回一个或多个要添加的类，例如addClass(function(index, currentClass))。

语法

$(selector).addClass(className, speed, easing, callback)

参数

className: 必需，一个或多个要添加的CSS类名，多个以空格分隔。
speed: 可选，动画的速度，即完成过渡效果的时间，可以是slow、fast或毫秒数。
easing: 可选，一个动画效果，默认是匀速的。可以是swing(动画逐渐变慢)和linear(动画均速运动)。
callback: 可选，动画完成后的回调函数。

返回值

返回jQuery对象，可以使用链式调用。

示例

1. 给元素添加一个CSS类名

$(selector).addClass(className);

2. 给元素添加多个CSS类名

$(selector).addClass(class1 class2 ... classN);

3. 给元素添加一个CSS类名，并在3秒内进行动画效果

$(selector).addClass(className, 3000);

4. 给元素添加一个CSS类名，并在3秒内进行动画效果，动画结束后执行回调函数

$(selector).addClass(className, 3000, function() {
  // 动画结束后执行的代码
});

5. 通过函数返回一个或多个要添加的类

$(selector).addClass(function(index, currentClass) {
  if (index === 0) {
    return "classA";
  } else {
    return "classB";
  }
});

总结

通过addClass()方法可以为指定的元素添加CSS类名，有效地改变元素的样式，从而实现动画效果和交互效果。在动画效果下添加类，可以让添加类的过程更加平滑自然，用户体验更佳。