JqueryUI - 彩色动画

jQueryUI 扩展了一些核心 jQuery 方法，因此您可以为元素设置不同的动画效果。 其中之一是 animate 方法。jQueryUI 扩展了 jQuery animate 方法，以添加对动画颜色的支持。 您可以为定义元素颜色的多个 CSS 属性之一设置动画。 以下是 animate 方法支持的 CSS 属性。

• backgroundColor − 设置元素的背景颜色。

• borderTopColor − 设置元素边框顶部的颜色。

• borderBottomColor − 设置元素边框底部的颜色。

• borderLeftColor − 设置元素边框左侧的颜色。

• borderRightColor − 设置元素边框右侧的颜色。

• color − 设置元素的文本颜色。

• outlineColor − 设置轮廓的颜色； 用于强调元素。

语法

以下是jQueryUI animate方法的语法 −

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

您可以在此方法中设置任意数量的属性，以 ,（逗号）分隔。

示例

以下示例演示了 addClass() 方法的使用。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('#button-1').click(function() {
               $('#animTarget').animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>

让我们将上述代码保存在一个 HTML 文件 animateexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。 现在，您可以使用结果 −

点击按钮，看看盒子的动画是如何变化的。