2025北京西装定制店优质推荐指南：从需求到共鸣的工艺之旅 - 真知灼见33
2025/12/20 15:55:14
jQuery UI 颜色动画（Color Animation）实例
jQuery UI 自带颜色动画支持，无需额外插件。你可以使用.animate()方法平滑过渡颜色属性（如backgroundColor、color、borderColor等），常用于高亮提示、状态反馈、按钮hover、主题切换等场景。
官方文档：https://jqueryui.com/animate/（颜色动画是内置的）
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础背景颜色动画
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Color Animation 基础示例</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>#box{width:200px;height:150px;background:#3498db;color:white;text-align:center;line-height:150px;margin:30px;font-size:1.2em;}</style></head><body><buttonid="animate">点击改变背景颜色</button><divid="box">背景颜色动画</div><script>$(function(){$("#animate").click(function(){$("#box").animate({backgroundColor:"#e74c3c"// 从蓝色渐变到红色},1500);});});</script></body></html>2.多属性颜色动画（背景 + 文字 + 边框）
<buttonid="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.循环颜色动画（闪烁高亮）
常用于吸引注意力或错误提示。
<buttonid="flash">闪烁高亮</button><script>$("#flash").click(function(){functionflash(){$("#box").animate({backgroundColor:"#f1c40f"},500).animate({backgroundColor:"#3498db"},500,flash);// 递归循环}flash();});</script>4.结合类切换的颜色动画（addClass/switchClass）
颜色变化更平滑。
<style>.highlight{backgroundColor:"#9b59b6";color:"#ecf0f1";borderColor:"#8e44ad";}</style><buttonid="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 颜色选择器联动的完整示例，请告诉我！