jQuery UI 实例 - 颜色动画(Color Animation)
使用 .animate() 实现颜色动画效果。
如需了解更多有关颜色动画(Color Animation)的细节,请查看 API 文档 颜色动画(Color Animation)。
jQuery UI 捆绑了 jQuery Color 插件,jQuery Color 插件提供了颜色动画及其他许多与颜色相关的实用功能。
动画(Animation)演示
点击按钮预览特效。
jQuery UI 特效 - 动画(Animation)演示.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; }
$(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;
});
});