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 的标准浏览器中打开它，您还必须看到以下输出。 现在，您可以使用结果 −
点击按钮，看看盒子的动画是如何变化的。
