<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
function Animator(node, initialOpacity, speed) {
this.node = node;
this.opacity = this.initialOpacity = initialOpacity;
this.speed = speed;
this.flagIn = false;
}
Animator.prototype = {
bind: function(type, listener) {
if(this.node.addEventListener) this.node.addEventListener(type, listener, false);
//@cc_on this.node.attachEvent('on' + type, listener);
},
process: function(type1, type2) {
var _this = this;
this.bind(type1, function() {
_this.flagIn = true;
_this.fadeIn();
});
this.bind(type2, function() {
_this.flagIn = false;
_this.fadeOut();
});
},
setOpacity: function() {
this.node.style.opacity = this.opacity;
//@cc_on if(@_jscript_version < 5.8) this.node.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (this.opacity * 100) + ')';
},
fadeIn: function() {
var _this = this;
setTimeout(function() {
if(_this.opacity < 1 && _this.flagIn) {
_this.setOpacity(_this.opacity += 0.1);
_this.fadeIn();
}
}, this.speed);
},
fadeOut: function() {
var _this = this;
setTimeout(function() {
if(_this.opacity > _this.initialOpacity) {
_this.setOpacity(_this.opacity -= 0.1);
_this.fadeOut();
}
}, this.speed);
}
};
new Animator(document.getElementById('animated'), 0.2, 50).process('mouseover', 'mouseout');
};
</script>
<style type="text/css">
#animated {
opacity: 0.2;
}
</style>
<!--[if IE]>
<style type="text/css">
#animated {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
</style>
<![endif]-->
</head>
<body>
<img id="animated" src="" alt="" />
</body>
</html>