May 08, 2021 jQuery UI
Use .animate() to animate colors.
To learn more about Color Animation, check out the API Document Color Animation.
The jQuery UI bundles the jQuery Color plug-in, which provides color animation and many other useful color-related features.
Click the button to preview the effect.
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>jQuery UI 特效 - 动画(Animation)演示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" >
<script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" >
<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">动画(Animation)</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">切换特效</a>
</body>
</html>