jQuery UI API - 顏色動畫（Color Animation）

jQuery UI 特效核心添加了使用 rgb()、rgba()、十六進制值或者顏色名比如"aqua" 來動態(tài)改變 color 屬性的功能。只需要包含 jQuery UI 特效核心文件，.animate() 就會支持顏色。

支持下列屬性：

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • columnRuleColor
  • outlineColor
  • textDecorationColor
  • textEmphasisColor

對顏色動畫的支持來自 jQuery Color 插件。Color 插件提供了一些用于顏色的函數(shù)。如需查看完整文檔，請訪問 jQuery Color 文檔。

Class 動畫（Class Animations）

雖然可以直接對 color 屬性進行動畫化，但是通常采用另一種更好的方法，即在一個 class 中包含樣式。jQuery UI 提供了一些動態(tài)添加或去除 CSS 類的方法，分別是 .addClass()、.removeClass()、 .toggleClass() 和 .switchClass()。這些方法將自動確定哪些屬性需要改變，哪些需要應(yīng)用適當?shù)膭赢嫛?/p>

實例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>顏色動畫（Color Animation）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <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" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></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>

查看演示