jQuery UI 颜色动画（Color Animation）实例
jQuery UI 自带颜色动画支持，无需额外插件。你可以使用 .animate() 方法平滑过渡颜色属性（如 backgroundColor、color、borderColor 等），常用于高亮提示、状态反馈、按钮hover、主题切换等场景。
官方文档：https://jqueryui.com/animate/（颜色动画是内置的）
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础背景颜色动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Color Animation 基础示例</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>
#box { width: 200px; height: 150px; background: #3498db; color: white; text-align: center; line-height: 150px; margin: 30px; font-size: 1.2em; }
</style>
</head>
<body>
<button id="animate">点击改变背景颜色</button>
<div id="box">背景颜色动画</div>
<script>
$(function() {
$("#animate").click(function() {
$("#box").animate({
backgroundColor: "#e74c3c" // 从蓝色渐变到红色
}, 1500);
});
});
</script>
</body>
</html>2. 多属性颜色动画（背景 + 文字 + 边框）
<button id="multi">多颜色动画</button>
<script>
$("#multi").click(function() {
$("#box").animate({
backgroundColor: "#2ecc71", // 绿色背景
color: "#ffffff", // 白色文字
borderColor: "#27ae60" // 绿色边框
}, {
duration: 2000,
easing: "easeInOutQuad" // 缓动效果
});
});
</script>
<style>
#box { border: 5px solid #2980b9; }
</style>3. 循环颜色动画（闪烁高亮）
常用于吸引注意力或错误提示。
<button id="flash">闪烁高亮</button>
<script>
$("#flash").click(function() {
function flash() {
$("#box").animate({ backgroundColor: "#f1c40f" }, 500)
.animate({ backgroundColor: "#3498db" }, 500, flash); // 递归循环
}
flash();
});
</script>4. 结合类切换的颜色动画（addClass/switchClass）
颜色变化更平滑。
<style>
.highlight {
backgroundColor: "#9b59b6";
color: "#ecf0f1";
borderColor: "#8e44ad";
}
</style>
<button id="classAnim">类切换颜色动画</button>
<script>
$("#classAnim").click(function() {
$("#box").switchClass("normal", "highlight", 1500); // 平滑切换类中的颜色
});
</script>支持的颜色属性：
backgroundColorcolorborderTopColor、borderRightColor、borderBottomColor、borderLeftColor（或简写borderColor）outlineColor
小技巧：
- 支持十六进制、RGB、RGBA、颜色名称（如 “red”）。
- 队列动画：多个
.animate()会自动排队，形成连续效果。 - 停止动画：
$("#box").stop(); - 颜色动画是 jQuery UI 独有（jQuery Core 不支持颜色过渡）。
颜色动画能让页面反馈更生动，常用于表单验证、按钮点击、通知高亮等。如果你需要 表单错误高亮动画、主题切换（明暗模式），或 RGB 颜色选择器联动 的完整示例，请告诉我！
