Just be compatible with IE (element.style.filter = 'alpha(opacity=value)') and non-IE (element.style.opacity=value).
Also, please note that the value of non-IEopaciy is between 0 and 1, and the value of IE is 1-100.
Below, paste the code:
/**
* @projectDescription animation (fade in, fade out) class
* /**
* @projectDescription KINGKIT UI
* @date 2010-6-1
* @author Kit.Liao
* @copyright kingkit.com.cn
* @version 0.9.0
* @Thanks: http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html
* Usage examples: fade in: KUI.Animation.fadeIn(el); fade out: KUI.Animation.fadeOut(el)
*/
KUI.Animation = {
fadeIn: function(id){
this.fade(id, true);
},
fadeOut: function(id){
this.fade(id, false);
},
fade: function(id, flag){
var target = KUI.get(id);
target.alpha = flag? 1:100;
target.style.opacity = (target.alpha / 100);
target.style.filter = 'alpha(opacity=' target.alpha ')';
var value = target .alpha;
(function(){
target.style.opacity = (value / 100);
target.style.filter = 'alpha(opacity=' value ')';
if (flag) {
value ;
if (value <= 100) {
setTimeout(arguments.callee, 15);//Continue calling itself
}
}
else {
value--;
if (value >= 0) {
setTimeout(arguments.callee, 15);//Continue calling itself
}
}
}) ();
}
}
Package download