jQuery UI RemoveClass（移除 Class）特效实例
removeClass() 是 jQuery UI Effects 核心方法之一，它可以以动画效果平滑移除 CSS 类，让样式变化（如颜色、尺寸、透明度、变换等）渐变过渡，而不是瞬间消失。常用于取消高亮、状态恢复、错误提示淡出、按钮恢复默认等交互反馈。
它与 addClass()、toggleClass()、switchClass() 使用方式类似，支持持续时间、easing 缓动和回调函数。
官方文档：https://jqueryui.com/removeClass/
下面提供几个渐进实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础移除 Class 动画
点击按钮平滑移除类，恢复原始样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI RemoveClass 示例</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>
.active {
background: #ff5722;
color: white;
font-size: 1.8em;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(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>
<button id="add">激活状态</button>
<button id="remove">移除激活（动画）</button>
<div id="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>
<button id="triggerError">触发错误状态</button>
<button id="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>
<button id="select">选中 + 高亮</button>
<button id="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. 自动淡出提示消息
常见场景：操作成功后消息自动消失。
<div id="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() 动画让状态恢复更自然，常用于表单验证错误清除、列表项取消选中、通知消息淡出等。如果你需要 表单输入错误高亮/清除、列表项选中动画，或 与其他特效组合 的完整示例，请告诉我！
