using a loop to change opacity

[10 weber]

This script is activated on a massage. There is no problem hiding it (the massage), but instead of showing up (the opacity was supposed to gradually increase to 1), it stops when opacity:0.04;

var alrt = document.getElementById("alrt");//  ...function showAlrt(isShow) {    if (isShow) { //works        for (var i = 0; i < 700; i += 28)            setTimeout("alrt.style.opacity -= 0.04;", i);                //For IE there is another script, in <!--[if IE]><![endif]-->, with filters.alpha.opacity        setTimeout("alrt.style.display = 'none';", 672);    }    else {        alrt.style.display = "block";        for (var i = 0; i < 700; i += 28)            [b]setTimeout("alrt.style.opacity += 0.04;", i); //activated once[/b]    }}

What did I do wrong?

[MrFish]

I've never thought to do anything like that and I honestly don't know what the problem could be. Try putting an alert in the loop and display the 'i' value and the opacity value. Then place an alert after the loop doing the same thing.

[10 weber]

I added document.getElementById("temp").innerHTML += "<br />i = " + i + ",opacity = " + alrt.style.opacity; after the setTimeout of each loop, (and a new element: <span id="temp" style="position:absolute; top:0; left:0;"></span> in the body), and got an interesting result - though the opacity is reduced, the alrt.style.opacity remains 1 (but I can still see the the element gradually disappears), and when it's supposed to increase it remains 0 (this time the element changes it's appearance just once, to opacity:0.04).The result in the <span id="temp" ...>:i = 0,opacity = 1i = 28,opacity = 1i = 56,opacity = 1i = 84,opacity = 1i = 112,opacity = 1i = 140,opacity = 1i = 168,opacity = 1i = 196,opacity = 1i = 224,opacity = 1i = 252,opacity = 1i = 280,opacity = 1i = 308,opacity = 1i = 336,opacity = 1i = 364,opacity = 1i = 392,opacity = 1i = 420,opacity = 1i = 448,opacity = 1i = 476,opacity = 1i = 504,opacity = 1i = 532,opacity = 1i = 560,opacity = 1i = 588,opacity = 1i = 616,opacity = 1i = 644,opacity = 1i = 672,opacity = 1i = 0,opacity = 0i = 28,opacity = 0i = 56,opacity = 0i = 84,opacity = 0i = 112,opacity = 0i = 140,opacity = 0i = 168,opacity = 0i = 196,opacity = 0i = 224,opacity = 0i = 252,opacity = 0i = 280,opacity = 0i = 308,opacity = 0i = 336,opacity = 0i = 364,opacity = 0i = 392,opacity = 0i = 420,opacity = 0i = 448,opacity = 0i = 476,opacity = 0i = 504,opacity = 0i = 532,opacity = 0i = 560,opacity = 0i = 588,opacity = 0i = 616,opacity = 0i = 644,opacity = 0i = 672,opacity = 0I also tried to change the loops to:

for (var i = 0.96; i >= 0; i -= 0.04) {    setTimeout("alrt.style.opacity = i;", 672 - i * 700);    document.getElementById("temp").innerHTML += "<br />i = " + i + ",opacity = " + alrt.style.opacity;}//AND:for (var i = 0.04; i <= 1; i += 0.04) {    setTimeout("alrt.style.opacity = i;", i * 700 - 28);    document.getElementById("temp").innerHTML += "<br />i = " + i + ",opacity = " + alrt.style.opacity;}

This time nothing worked - the opacity always remained 1, and for some reason i stopped at 0.04 and 0.96 instead of 0 and 1, respectively:i = 0.96,opacity = 1i = 0.9199999999999999,opacity = 1i = 0.8799999999999999,opacity = 1i = 0.8399999999999999,opacity = 1i = 0.7999999999999998,opacity = 1i = 0.7599999999999998,opacity = 1i = 0.7199999999999998,opacity = 1i = 0.6799999999999997,opacity = 1i = 0.6399999999999997,opacity = 1i = 0.5999999999999996,opacity = 1i = 0.5599999999999996,opacity = 1i = 0.5199999999999996,opacity = 1i = 0.4799999999999996,opacity = 1i = 0.4399999999999996,opacity = 1i = 0.39999999999999963,opacity = 1i = 0.35999999999999965,opacity = 1i = 0.3199999999999997,opacity = 1i = 0.2799999999999997,opacity = 1i = 0.23999999999999969,opacity = 1i = 0.19999999999999968,opacity = 1i = 0.15999999999999967,opacity = 1i = 0.11999999999999966,opacity = 1i = 0.07999999999999965,opacity = 1i = 0.039999999999999654,opacity = 1i = 0.04,opacity = 1i = 0.08,opacity = 1i = 0.12,opacity = 1i = 0.16,opacity = 1i = 0.2,opacity = 1i = 0.24000000000000002,opacity = 1i = 0.28,opacity = 1i = 0.32,opacity = 1i = 0.36,opacity = 1i = 0.39999999999999997,opacity = 1i = 0.43999999999999995,opacity = 1i = 0.4799999999999999,opacity = 1i = 0.5199999999999999,opacity = 1i = 0.5599999999999999,opacity = 1i = 0.6,opacity = 1i = 0.64,opacity = 1i = 0.68,opacity = 1i = 0.7200000000000001,opacity = 1i = 0.7600000000000001,opacity = 1i = 0.8000000000000002,opacity = 1i = 0.8400000000000002,opacity = 1i = 0.8800000000000002,opacity = 1i = 0.9200000000000003,opacity = 1i = 0.9600000000000003,opacity = 1NOTE: I already did something similar in the past (that works):

var element;function description(elmnt) {    if (element) {        if (element.id != elmnt.id + "D") {            element.style.display = "none";            element.filters.alpha.opacity = 0;            element.style.opacity = 0;        }        else            return;        }    element = document.getElementById(elmnt.id + "D");    element.style.display = "block";[b]    for (var i = 0; i < 700; i += 28) {        setTimeout("element.filters.alpha.opacity += 4", i);        setTimeout("element.style.opacity += 0.04", i);    }[/b]}[html]<form ...>    <fieldset>        <legend>...</legend>        <table>            <tr>                <td id="namesF">name:</td>                <td><input type="text" id="names" onfocus="description(this)" onblur="A(isNames(), this) //checkes if the input is valid and shows massages accordingly" /></td>                <td><div id="namesD"><p><b>name</b><br /><!-- description --></p><p id="namesA"><!-- massages --></p></div></td>            </tr>            <tr>                <td id="userF">username:</td>                <td><input type="text" id="user" onfocus="description(this)" onblur="A(isUser(), this)" maxlength="10" /></td>                <td><div id="userD"><p><b>username</b><br /></p><p id="userA"></p></div></td>            </tr>                        <!--...-->                        <tr>                <td colspan="2" align="center">                    <button type="submit" name="submit" id="submit" onclick="return isValid()" runat="server"><img src="..." alt="send" /><br />send</button>                    <button type="reset" onclick="return confirm('Are you sure?')"><img src="..." alt="reset" /><br />reset</button>                </td>            </tr>        </table>    </fieldset></form>[/html]

</div>WHAT IS GOING ON???

[MrFish]

Maybe it's a 2-part process like seen here-http://www.quirksmode.org/js/opacity.html

[dsonesuk]

thought i remember something similar

   <html>	 <head>	 <style type="text/css">	 	 #target { width: 300px;}	 	 </style>	 	 	 <script>	 function opacity(id, opacStart, opacEnd, millisec) {		 //speed for each frame		 var speed = Math.round(millisec / 100);		 var timer = 0;			 //determine the direction for the blending, if start and end are the same nothing happens		 if(opacStart > opacEnd) {			 for(i = opacStart; i >= opacEnd; i--) {				 setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));				 timer++;			 }		 } else if(opacStart < opacEnd) {			 for(i = opacStart; i <= opacEnd; i++)				 {				 setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));				 timer++;			 }		 }	 }		 //change the opacity for different browsers	 function changeOpac(opacity, id) {		 var object = document.getElementById(id).style;		 object.opacity = (opacity / 100);		 object.MozOpacity = (opacity / 100);		 object.KhtmlOpacity = (opacity / 100);		 object.filter = "alpha(opacity=" + opacity + ")";	 }		 function shiftOpacity(id, millisec) {		 //if an element is invisible, make it visible, else make it visible		 if(document.getElementById(id).style.opacity == 0) {			 opacity(id, 0, 99, millisec);		 } else {			 opacity(id, 99, 0, millisec);		 }	 }	 </script>	 </head>    	 <body>	 <div id="target">This division should switch on/off by the click of the link</div>	 <a href="java script:shiftOpacity('target', 500)">show/hide</a>			 <div style="position:relative; width:300px; padding: 10px;">	 <a href="#" onclick="runthis();" ><b>Link</b></a>	   	   <div id="appearing" style="position:relative; display:none" >	   The text is invisible until you click on "link"	   </div>		 </div>		   <script type="text/javascript">		function runthis()		{   		var   x = document.getElementById('appearing').style;				if (x.display  == "none")		{				x.display="block";				}		else		{				x.display="none";				}	   }	   </script>	 </body></html>

[10 weber]

It works now, though I still want to know what the problem was.Thanks!

[thescientist]

were you checking for errors? Maybe those could have given you some insight into where the script might have been going wrong. Either way its good practice in the future.