JqueryUI - 彩色动画

JqueryUI颜色动画 - 从简单和简单的步骤学习JqueryUI从基本到高级概念，包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单，Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

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

backgroundColor : 设置元素的背景颜色.
borderTopColor : 设置元素边框顶部的颜色.
borderBottomColor : 设置元素边框底部的颜色.
borderLeftColor : 设置元素边框左侧的颜色.
borderRightColor : 设置元素边框右侧的颜色.
颜色 : 设置元素的文本颜色.
outlineColor : 设置轮廓的颜色;用来强调元素.

语法

以下是jQueryUI的语法 animate 方法 :

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

您可以在此方法中设置任意数量的属性，用，(逗号)分隔.

示例

以下示例演示了如何使用 addClass()方法.

               jQuery UI addClass Example                                                   $(document).ready(function() {            $('#button-1').click(function() {               $('#animTarget').animate({                  backgroundColor: "black",                  color: "white"               })            })         });                              Hello!

Click Me

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

单击按钮，查看动画如何更改框.