当前位置：首页 > news >正文

jQuery UI 实例 - 转换 Class（Switch Class）

news 2026/7/2 10:46:22

jQuery UI SwitchClass（转换 Class）特效实例

switchClass()是 jQuery UI Effects 中非常强大的方法，它可以以动画效果从一个 CSS 类平滑转换到另一个 CSS 类。本质上是先移除旧类，再添加新类，整个过程平滑过渡，常用于状态切换、主题更换、模式切换（正常/错误/成功）、动画按钮等场景。

与addClass()、removeClass()、toggleClass()不同的是，switchClass() 明确指定“从 A 切换到 B”，更适合有明确前后状态的交互。

官方文档：https://jqueryui.com/switchClass/

下面提供几个渐进实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。

1.基础转换 Class 动画

从一种状态平滑切换到另一种状态。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI SwitchClass 示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//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 30pxrgba(76,175,80,0.5);border-radius:15px;}.warning{background:#FF9800;color:white;transform:rotate(3deg);box-shadow:0 0 20pxrgba(255,152,0,0.6);}.error{background:#f44336;color:white;transform:scale(0.95)rotate(-2deg);box-shadow:0 0 25pxrgba(244,67,54,0.7);}#box{margin:40px auto;cursor:pointer;}</style></head><body><buttonid="toSuccess">切换到成功状态</button><buttonid="toWarning">切换到警告状态</button><buttonid="toError">切换到错误状态</button><buttonid="toNormal">恢复正常</button><divid="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.带缓动 + 回调的转换

使用弹跳缓动，并在转换完成后提示。

<buttonid="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.多状态循环切换

实现三种状态循环：正常 → 警告 → 错误 → 正常。

<buttonid="cycle">循环切换状态</button><script>varstates=["normal","warning","error"];varcurrent=0;$("#cycle").click(function(){varnext=states[(current+1)%states.length];$("#box").switchClass(states[current],next,1000);current=(current+1)%states.length;});</script>

4.常见应用：表单验证状态切换

输入框根据验证结果切换样式。

<inputtype="text"id="username"placeholder="请输入用户名"><buttonid="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(){varval=$("#username").val();if(val.length>=3){$("#username").switchClass("invalid default","valid",800);}else{$("#username").switchClass("valid default","invalid",800);}});</script>