.switchClass()学习笔记

简介

.switchClass() 是 jQuery 中的一个方法，它能够在多个类之间进行切换操作。

语法

javascriptCopy Code
.switchClass( class1 [, class2 ] [, duration ] [, easing ] [, complete ] )

参数说明：

• class1：必选，要添加或移除的 class 名称。
• class2：可选，要添加或移除的 class 名称。
• duration：可选，规定动画的时长，默认为 400 毫秒。
• easing：可选，规定动画的缓动函数，默认为 "swing"。
• complete：可选，动画完成后执行的函数。

实例

切换类

以下示例演示了如何使用 .switchClass() 方法在两个类之间进行切换：

htmlCopy Code
<p class="box">这是一段文字。</p>
<button id="toggle">切换样式</button>

cssCopy Code
.box {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.blue {
  background-color: #00f;
}

javascriptCopy Code
$("#toggle").click(function(){
  $("p.box").switchClass("box", "blue", 1000);
});

点击按钮后，p 元素的 box 类会被移除，blue 类将被添加。

动画完成后执行回调函数

以下示例演示了如何在使用 .switchClass() 方法时指定动画完成后需要执行的回调函数：

htmlCopy Code
<p class="box">这是一段文字。</p>
<button id="toggle">切换样式</button>

cssCopy Code
.box {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.blue {
  background-color: #00f;
}

javascriptCopy Code
$("#toggle").click(function(){
  $("p.box").switchClass("box", "blue", 1000, function(){
    alert("动画已完成。");
  });
});

点击按钮后，p 元素的 box 类会被移除，blue 类将被添加。当动画完成后，会弹出一个提示框。

结语

.switchClass() 方法非常方便实用，能够快速地在多个类之间进行切换操作，并且支持动画效果和回调函数。