Hi,
I have this simple code that fades a div in and out. The fadeIn works fine, however, the fadeOut only works with the alerts in place. See code:
If you comment out the alert in the fadeOut() function the values starting counting up from zero instead of down from 10, even though the loop is set to count down. What am I not seeing? Thanks.
I have this simple code that fades a div in and out. The fadeIn works fine, however, the fadeOut only works with the alerts in place. See code:
HTML:
<script type="text/javascript">
var myObj;
function fadeIn() {
myObj = document.getElementById("fadeDiv");
for (i=0; i<11; i++) {
alert(i);
setTimeout("setOpacity("+i+")", 100*i);
}
var i = "";
}
function fadeOut() {
myObj = document.getElementById("fadeDiv");
for (i=10; i>=0; i--) {
alert(i);
setTimeout("setOpacity("+i+")", 100*i);
}
var i = "";
}
function setOpacity(value) {
alert(value);
myObj.style.opacity = value/10;
myObj.style.filter = "alpha(opacity=" + value*10 + " )";
}
</script>
</head>
<body>
<div id="fadeDiv" style="background-color:#006699; border:double #003366 2px; width:100px; height:100px; position:relative; top:200px;">
<div style="color:white; font:bold 15pt Times; text-align:center; margin-top:30px; height:95px;">Opacity</div>
</div>
<a href="javascript:fadeIn()">Fade In</a><br/>
<a href="javascript:fadeOut()">Fade Out</a>
</body>If you comment out the alert in the fadeOut() function the values starting counting up from zero instead of down from 10, even though the loop is set to count down. What am I not seeing? Thanks.
Last edited:
