Fading Isn't Working.

[MrFish]

I'm trying to make a black div fade over my page and a message to be displayed. I can get it show a black opacity but I really want it to fade. Normal: http://mrfishtests.byethost17.com/With Alert: http://mrfishtests.byethost17.com/fade2.php (same script with alert);My script looks like this-

function blackout(){		var blackout_style = document.getElementById('blackout').style;			if(blackout_style.visibility='hidden'){				blackout_style.visibility='visible';				var opacity_value = 0;				var decimal_opacity = 0;				for(opacity_value=0;opacity_value<60;opacity_value=opacity_value+10){					blackout_style.MozOpacity = decimal_opacity; 					blackout_style.KhtmlOpacity = decimal_opacity; 					blackout_style.filter = 'alpha(opacity=' + opacity_value; + ')'; 					decimal_opacity = decimal_opacity + 0.1;				}		}}

And the opacity works fine and all but it runs the loop until it gets to the end value, then displays it. That or it's too fast. When I put that alert in there you can see it fine. I would like it to show the div at 10%, 20%, 30%, 40%, etc.I tried putting this wait function in there, but it didn't work.

function wait(milli){var date = new Date();var curdate = null;do{curdate = new Date();}while(curdate-date < milli);}

[justsomeguy]

Don't use a wait function like that, a function that just occupies the CPU for a set amount of time won't help anything, the CPU should be doing other work during that time. A real wait function would release the CPU to do other work and check back in a while to see if it's time to start again. Javascript doesn't have a wait function like you would find in C or PHP. The for loop isn't working because it executes in a few milliseconds, so assuming your monitor had a refresh rate of about 1ms, you might be able to use a really high-speed camera to record the fade. If you want it to do a step every X milliseconds, look into using setTimeout or setInterval. You use those functions to schedule a piece of code to run a certain number of milliseconds in the future.

[MrFish]

I tried this and it crashed both my broswers.

function blackout(){		blackout_style = document.getElementById('blackout').style;			if(blackout_style.visibility='hidden'){				blackout_style.visibility='visible';				opacity_value = 0;				decimal_opacity = 0;				do{setTimeout("blackout_style.MozOpacity = decimal_opacity;  blackout_style.KhtmlOpacity = decimal_opacity; blackout_style.filter = 'alpha(opacity=' + opacity_value; + ')'; decimal_opacity = decimal_opacity + 0.1;", 1000);}				while(opacity_value<=60);		}}

edit: haha, maybe because it was impossible to reach 60 opacity_value ^^

[justsomeguy]

Yeah, you don't want to stick setTimeout in a loop. You're probably scheduling up several tens of thousands of functions to run, so your browser doesn't appreciate that. Use one setTimeout to run a function after a certain number of seconds, and in that function check the opacity values and decide if you need to use another setTimeout to schedule the next one. So you have one function to do whatever housekeeping and start the first timeout, which runs a second function that actually changes the opacity and check if it needs to schedule itself to run again.

[MrFish]

Alright, I got it to work now.

function fadein(){	decimal_opacity = decimal_opacity + 0.03;	opacity_value=opacity_value+3;	blackout_style.MozOpacity = decimal_opacity; 	blackout_style.KhtmlOpacity = decimal_opacity; 	blackout_style.filter = 'alpha(opacity=' + opacity_value + ')'; 	if(opacity_value<60){		setTimeout("fadein()", 30);	}}function blackout(){		blackout_style = document.getElementById('blackout').style;			if(blackout_style.visibility='hidden'){				blackout_style.visibility='visible';				opacity_value = 0;				decimal_opacity = 0;				opacity_value = 0;				fadein();			}		}

Thanks for your help