页面元素渐入渐出的javascript代码

Firefox only

javascirpt:

function OpacityElement(element)
{
this.targetElement = element;
this.opacity = 1.0;
this.display = null;
}

OpacityElement.prototype =
{
intervalFun: null
,
timeoutFun: null
,
handleEvent: function(t)
{
switch(t)
{
case 1:
this.opacity -= 0.04;
this.targetElement.style.opacity = this.opacity;
break;
case 2:
this.opacity = 0.0;
this.targetElement.style.opacity = 0.0;
this.display = this.targetElement.style.display;
this.targetElement.style.display = 'none';
clearInterval(this.intervlaFun);
clearTimeout(this.timeoutFun);
break;
case 3:
this.opacity += 0.04;
this.targetElement.style.opacity = this.opacity;
break;
case 4:
this.opacity = 1.0;
this.targetElement.style.opacity = 1.0;
clearInterval(this.intervlaFun);
clearTimeout(this.timeoutFun);
break;
}
}
,
Hidden: function()
{
var self = this;
this.intervlaFun = setInterval( function() { self.handleEvent(1); }, 41);
this.timeoutFun = setTimeout( function() { self.handleEvent(2); }, 1000);
}
,
Show: function()
{
var self = this;
this.targetElement.style.display = this.display;
this.intervlaFun = setInterval( function() { self.handleEvent(3); }, 41);
this.timeoutFun = setTimeout( function() { self.handleEvent(4); },
1000);
}
}

}

在html中的使用

<script type="text/javascript">
var op = new OpacityElement(document.getElementById('itemId'));
document.getElementById('btnHidden').addEventListener('click', function () { op.Hidden();
}, false);
document.getElementById('btnShow').addEventListener('click', function () { op.Show();
}, false);
</script>