jQuery UI 实例 - 移除 Class（Remove Class）
jQuery UI RemoveClass（移除 Class）特效实例
removeClass()是 jQuery UI Effects 核心方法之一，它可以以动画效果平滑移除 CSS 类，让样式变化（如颜色、尺寸、透明度、变换等）渐变过渡，而不是瞬间消失。常用于取消高亮、状态恢复、错误提示淡出、按钮恢复默认等交互反馈。
它与addClass()、toggleClass()、switchClass()使用方式类似，支持持续时间、easing 缓动和回调函数。
官方文档：https://jqueryui.com/removeClass/
下面提供几个渐进实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础移除 Class 动画
点击按钮平滑移除类，恢复原始样式。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI RemoveClass 示例</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>.active{background:#ff5722;color:white;font-size:1.8em;padding:30px;border-radius:15px;box-shadow:0 8px 20pxrgba(0,0,0,0.3);transform:scale(1.1);}#box{width:200px;height:120px;background:#9E9E9E;color:white;text-align:center;line-height:120px;margin:30px auto;border-radius:8px;}</style></head><body><buttonid="add">激活状态</button><buttonid="remove">移除激活（动画）</button><divid="box">点击按钮测试</div><script>$(function(){$("#add").click(function(){$("#box").addClass("active",1000);});$("#remove").click(function(){$("#box").removeClass("active",1500);// 1.5秒内平滑移除类});});</script></body></html>2.带缓动 + 回调的移除
使用缓动函数让动画更生动，并在移除完成后提示。
<style>.error{background:#f44336;border:4px solid #d32f2f;color:white;font-weight:bold;transform:rotate(5deg)scale(1.05);}</style><buttonid="triggerError">触发错误状态</button><buttonid="clearError">清除错误（动画）</button><script>$("#triggerError").click(function(){$("#box").addClass("error",800);});$("#clearError").click(function(){$("#box").removeClass("error",1200,"easeOutElastic",function(){alert("错误状态已清除！");});});</script>3.同时移除多个类 + switchClass 恢复
从复杂状态平滑恢复到默认。
<style>.selected{background:#2196F3;transform:scale(1.15);}.highlighted{box-shadow:0 0 25px gold;font-style:italic;}.normal{background:#607D8B;transform:scale(1);box-shadow:none;font-style:normal;}</style><buttonid="select">选中 + 高亮</button><buttonid="reset">恢复正常（动画）</button><script>$("#select").click(function(){$("#box").addClass("selected highlighted",1000);});$("#reset").click(function(){// 方法1：直接移除多个类// $("#box").removeClass("selected highlighted", 1200);// 方法2：使用 switchClass 直接从当前状态切换到 normal$("#box").switchClass("selected highlighted","normal",1500);});</script>4.自动淡出提示消息
常见场景：操作成功后消息自动消失。
<divid="message"class="success-msg">操作成功！3秒后自动消失</div><style>.success-msg{background:#4CAF50;color:white;padding:15px;margin:20px;border-radius:6px;text-align:center;opacity:1;}.fadeout{opacity:0;transform:translateY(-20px);}</style><script>// 3秒后自动移除类，实现淡出setTimeout(function(){$("#message").removeClass("success-msg",1000,function(){$(this).remove();// 完全移除元素});},3000);</script>小技巧：
- 可动画属性：color、background-color、border、font-size、width/height、opacity、transform、box-shadow 等。
- 多个类：
removeClass("class1 class2", duration) - 队列动画：连续调用 addClass/removeClass 会自动排队，形成连续效果。
- 与 Effect 结合：可实现更复杂动画，如先 shake 再 removeClass。
removeClass() 动画让状态恢复更自然，常用于表单验证错误清除、列表项取消选中、通知消息淡出等。如果你需要表单输入错误高亮/清除、列表项选中动画，或与其他特效组合的完整示例，请告诉我！