jQuery UI颜色动画 jQueryUI颜色动画|jQueryUI

本文概述

jQueryUI颜色动画的示例
jQuery UI Color使用Toggle进行动画处理

【jQuery UI颜色动画】jQuery UI在核心jQuery中添加了一些方法, 以扩展动画功能的功能。你可以为元素设置不同的过渡动画。 jQuery UI也支持动画颜色。在这里, 你可以为一个或多个定义元素颜色的CSS属性设置动画。
以下是支持animate方法的CSS属性的列表。

backgroundColor：用于设置元素的背景色。
borderTopColor：用于设置元素边框顶侧的颜色。
borderBottomColor：用于设置元素边框底侧的颜色。
borderLeftColor：用于设置元素边框左侧的颜色。
borderRightColor：用于设置元素边框右侧的颜色。
color：用于设置元素的文本颜色。
outlineColor：用于设置轮廓的颜色；用来强调元素。

jQuery UI动画方法的语法：

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

如果要在此方法中添加多个属性, 则必须用逗号分隔它们。jQueryUI颜色动画的示例让我们以使用addClass()方法来演示颜色动画方法为例。

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < title> jQuery UI addClass Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/00030B546-0.jpg"> < /script> < script src="http://img.readke.com/220430/0003064316-1.jpg"> < /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: "red", color: "white" }) }) }); < /script> < /head> < body> < div id=animTarget class="elemClass"> Hello srcmini < /div> < button id="button-1"> Click Me< /button> < /body> < /html>

立即测试
jQuery UI Color使用Toggle进行动画处理让我们以使用切换效果为例来演示颜色动画方法：

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Effects - Animate demo< /title> < link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> < script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js"> < /script> < script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js"> < /script> < link rel="stylesheet" href="http://www.srcmini.com/resources/demos/style.css"> < style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } < /style> < script> $(function() { var state = true; $( "#button" ).click(function() { if ( state ) { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); } else { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000 ); } state = !state; }); }); < /script> < /head> < body> < div class="toggler"> < div id="effect" class="ui-widget-content ui-corner-all"> < h3 class="ui-widget-header ui-corner-all"> Animate< /h3> < p> jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. < /p> < /div> < /div> < button id="button" class="ui-state-default ui-corner-all"> Toggle Effect< /button> < /body> < /html>

立即测试