jQuery UI SwitchClass（转换 Class）特效实例
switchClass() 是 jQuery UI Effects 中非常强大的方法，它可以以动画效果从一个 CSS 类平滑转换到另一个 CSS 类。本质上是先移除旧类，再添加新类，整个过程平滑过渡，常用于状态切换、主题更换、模式切换（正常/错误/成功）、动画按钮等场景。
与 addClass()、removeClass()、toggleClass() 不同的是，switchClass() 明确指定“从 A 切换到 B”，更适合有明确前后状态的交互。
官方文档：https://jqueryui.com/switchClass/
下面提供几个渐进实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础转换 Class 动画
从一种状态平滑切换到另一种状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI SwitchClass 示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
.normal {
background: #607D8B;
color: white;
width: 200px;
height: 120px;
padding: 20px;
text-align: center;
line-height: 120px;
border-radius: 8px;
}
.success {
background: #4CAF50;
color: white;
font-size: 1.6em;
transform: scale(1.1);
box-shadow: 0 10px 30px rgba(76,175,80,0.5);
border-radius: 15px;
}
.warning {
background: #FF9800;
color: white;
transform: rotate(3deg);
box-shadow: 0 0 20px rgba(255,152,0,0.6);
}
.error {
background: #f44336;
color: white;
transform: scale(0.95) rotate(-2deg);
box-shadow: 0 0 25px rgba(244,67,54,0.7);
}
#box {
margin: 40px auto;
cursor: pointer;
}
</style>
</head>
<body>
<button id="toSuccess">切换到成功状态</button>
<button id="toWarning">切换到警告状态</button>
<button id="toError">切换到错误状态</button>
<button id="toNormal">恢复正常</button>
<div id="box" class="normal">当前状态：正常</div>
<script>
$(function() {
$("#toSuccess").click(function() {
$("#box").switchClass("normal", "success", 1200);
});
$("#toWarning").click(function() {
$("#box").switchClass("normal", "warning", 1000);
});
$("#toError").click(function() {
$("#box").switchClass("normal", "error", 1000);
});
$("#toNormal").click(function() {
// 从当前任意状态切换回 normal
$("#box").switchClass("success warning error", "normal", 1500);
});
});
</script>
</body>
</html>2. 带缓动 + 回调的转换
使用弹跳缓动，并在转换完成后提示。
<button id="modeSwitch">切换模式</button>
<style>
.light { background: #FFFDE7; color: #333; }
.dark { background: #212121; color: #FFFDE7; font-weight: bold; }
</style>
<script>
$("#modeSwitch").click(function() {
$("#box").switchClass("light", "dark", 1500, "easeInOutBack", function() {
alert("已切换到暗黑模式！");
}).switchClass("dark", "light", 1500, "easeInOutBack", function() {
alert("已切换回明亮模式！");
}); // 注意：这里会排队执行，形成来回切换
});
</script>3. 多状态循环切换
实现三种状态循环：正常 → 警告 → 错误 → 正常。
<button id="cycle">循环切换状态</button>
<script>
var states = ["normal", "warning", "error"];
var current = 0;
$("#cycle").click(function() {
var next = states[(current + 1) % states.length];
$("#box").switchClass(states[current], next, 1000);
current = (current + 1) % states.length;
});
</script>4. 常见应用：表单验证状态切换
输入框根据验证结果切换样式。
<input type="text" id="username" placeholder="请输入用户名">
<button id="validate">验证</button>
<style>
.valid { border: 3px solid #4CAF50; background: #e8f5e8; }
.invalid { border: 3px solid #f44336; background: #ffebee; }
.default { border: 1px solid #ccc; }
</style>
<script>
$("#validate").click(function() {
var val = $("#username").val();
if (val.length >= 3) {
$("#username").switchClass("invalid default", "valid", 800);
} else {
$("#username").switchClass("valid default", "invalid", 800);
}
});
</script>小技巧：
- 移除旧类、添加新类是原子操作，中间不会出现无样式状态。
- 支持多个旧类：
switchClass("old1 old2", "new", duration) - 队列动画：连续调用 switchClass 会自动排队，形成连续状态转换。
- 与 toggleClass 区别：toggleClass 是“有/无”切换，switchClass 是“从A到B”明确转换。
switchClass() 是实现明确状态迁移的最佳选择，常用于主题切换、模式切换（日间/夜间）、步骤向导状态、按钮多态反馈等。如果你需要 暗黑模式全局切换、步骤进度条状态动画，或 结合 Dialog 的状态反馈 示例，请告诉我！
