html animate颜色,jQuery UI 实例

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;

});

});

动画(Animation)

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

切换特效