芒果小站

项目中遇到的一个动画效果，在这里分享一下。基于 YUI 2.8 框架。

CSS:

.coloring{border:1px solid #eee;padding:50px;margin:50px 0;background:#fff;}

HTML:

<button id="view-coloring">点击染色</button>
<div id="coloring">染色层</div>

JavaScript:
你需要预先载入 YUI 2.8 框架，这里提供 Google 的托管地址：

<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/animation/animation-min.js"></script>

当然也可以从 YUI 官方拽下来：

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script =src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js"></script>

动画效果代码如下：

(function(){
var attr = {backgroundColor:{from:'#fff', to:'#ff9'}};
var anim = new YAHOO.util.ColorAnim('coloring', attr);
var remove = function remove(){
var attr = {backgroundColor:{from:'#ff9', to:'#fff'}};
var anim = new YAHOO.util.ColorAnim('coloring', attr);
anim.animate();
}
YAHOO.util.Event.on('view-coloring', 'click', function(){
anim.animate();
anim.onComplete.subscribe(remove);
});
})();

演示地址：http://bbs.blueidea.com/thread-2978052-1-1.html