jQuery UI | switchClass() 方法

简介

switchClass() 方法是 jQuery UI 中的一种动画效果，用于在元素的类名之间切换。该方法可以将元素从旧类名动画到新类名。

语法

$(selector).switchClass(class1, class2, duration, easing, complete);

参数说明：

• class1: 要删除的类名，如".oldClass"
• class2: 要添加的类名，如".newClass"
• duration: 变换动画的持续时间，以毫秒表示，默认值为400
• easing: 变换动画的缓动函数，默认值为"swing"
• complete: 变换动画完成后执行的函数

返回值

该方法返回一个 jQuery 对象。

示例

<div class="box">
  <p>Click to toggle class</p>
</div>

.box {
  display: block;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #f0f0f0;
  border-radius: 10px;
}

.box.active {
  background: #ff0;
}

$(document).ready(function() {
  $('.box').click(function() {
    $(this).switchClass('box', 'box active', 500);
  });
});

上述代码将给.box元素绑定了一个点击事件，当点击该元素时，将从旧类名box动画到新类名box active。该动画持续时间为500毫秒。您可以在此处进行更改以适应您的需求。

备注

• 该方法仅在 jQuery UI 库中可用，因此请确保您的项目中引入了该库。
• 该方法可以与其他 jQuery UI 动画方法（如 animate()）一起使用，以构建更丰富的动画效果。