Menu
Hi,
I have created a div that will fade out before being made hidden. The strange thing about it is that on the first time around the fading is smooth and fairly slow. But… if one clicks on the button again the speed of fading increases – the more one clicks the faster it fades out.
I have put alerts in to see if the divFade function is working properly (counting the values down for opacity) and it is. I just can’t seem to find the problem and why the rate of fade increase.
Would someone mind taking a look at the following code and see if the problem can be determined?
The code example creates a div, then slowly gets it to fade out at which point it is made hidden. If one clicks on the button again it will make the div visible and then slowly make it fade again.
Any help would be greatly appreciated…
[code]
<head>
<title>Example</title>
<script type=”text/javascript”>
var intl;
var number;
function testFade(){
if(eltNotify=document.getElementById(‘text’)){eltNotify.style.visibility=””;}
else{
var eltBody = document.getElementsByTagName(‘body’).item(0);
eltNotify = document.createElement(‘div’);
eltNotify.id=’text’;
eltNotify.style.display = ‘block’;
eltNotify.innerHTML = ‘This is fading!’;
eltBody.appendChild(eltNotify);
}
eltNotify.style.width=’90’;
eltNotify.style.height=’21’;
eltNotify.style.backgroundColor=’gold’;
if(navigator.userAgent.indexOf(“MSIE”) == -1){number=1;}
else {number=100;}
eltNotify.style.opacity = number;
eltNotify.style.filter = ‘alpha(opacity=’ + number + ‘)’;
int1 = setInterval(“divFade(‘text’);”,75);
}
function divFade(id){
var object = document.getElementById(id);
if(number>0){
if(navigator.userAgent.indexOf(“MSIE”) == -1){
object.style.opacity = number;
number-=.05;
number=Math.round(number*100)/100;
} else {
object.style.filter = ‘alpha(opacity=’ + number + ‘)’;
number-=5;
}
}
else {
clearInterval(intl);
object.style.visibility=”hidden”;
}
}
</script>
</head>
<body>
<input type=”button” value=”Test Fade” id=”button” onclick=”testFade()”>
<br><br>
</body>