jQueryUI扩展了一些核心jQuery方法,以便您可以为元素设置不同的过渡动画.其中一个是 animate 方法. jQueryUI扩展了jQuery animate 方法,以添加对动画颜色的支持.您可以为定义元素颜色的多个CSS属性中的一个设置动画.以下是 animate 方法支持的CSS属性.
backgroundColor : 设置元素的背景颜色.
borderTopColor : 设置元素边框顶部的颜色.
borderBottomColor : 设置元素边框底部的颜色.
borderLeftColor : 设置元素边框左侧的颜色.
borderRightColor : 设置元素边框右侧的颜色.
颜色 : 设置元素的文本颜色.
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://img01.yuandaxia.cn/Content/img/tutorials/jqueryui/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的标准浏览器中打开它,你还必须看到以下输出.现在,您可以使用结果
单击按钮,查看动画如何更改框.