jQuery UI API – 颜色动画（Color Animation）

优质

小牛编辑

122浏览

2023-12-01

jQuery UI 特效核心添加了使用 rgb()、rgba()、十六进制值或者颜色名比如"aqua" 来动态改变 color 属性的功能。只需要包含 jQuery UI 特效核心文件，.animate() 就会支持颜色。

支持下列属性：

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
columnRuleColor
outlineColor
textDecorationColor
textEmphasisColor

对颜色动画的支持来自 jQuery Color 插件。Color 插件提供了一些用于颜色的函数。如需查看完整文档，请访问 jQuery Color 文档。

Class 动画（Class Animations）

虽然可以直接对 color 属性进行动画化，但是通常采用另一种更好的方法，即在一个 class 中包含样式。jQuery UI 提供了一些动态添加或去除 CSS 类的方法，分别是 .addClass()、.removeClass()、 .toggleClass() 和 .switchClass()。这些方法将自动确定哪些属性需要改变，哪些需要应用适当的动画。

实例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>颜色动画（Color Animation）演示</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #elem {
    color: #006;
    background-color: #aaa;
    font-size: 25px;
    padding: 1em;
    text-align: center;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="elem">颜色动画</div>
<button id="toggle">改变颜色</button>
 
<script>
$( "#toggle" ).click(function() {
  $( "#elem" ).animate({
    color: "green",
    backgroundColor: "rgb( 20, 20, 20 )"
  });
});
</script>
 
</body>
</html>