Fading a <div>

[Bubbleboy]

I wrote a code that i want to fade a <div> tag with. Here's the <div> tag.

<div id="about" onmouseover="fadein('about');"><li><a href="">About</a>
    
					<ul class="navbar" id="aboutoptions">
						<li><a href="aboutus.html">Us</a></li>
						<li><a href="aboutproj.html">Projects</a></li>
					</ul>
				</li></div>

Here's my java code.

function fadein(objectID){
	object = document.getElementById(objectID);
	object.style.opacity = '0';
	animatefadein();
	function animatefadein(){
	 if(object.style.opacity < 1){
	 var current = object.style.opacity;
	 var newopac = current + .1;
	 object.style.opacity = newopac + ' ';}
	 }
	setTimeout('animatefadein()', 1000);
}

it goes through, sets the <div> opacity to zero, then goes through the animate function and sets it to .1 succesfully, but won't seTimeout and go back through. Does anyone know what i can do? Let's forget IE for a while though, i realize they don't use the opacity tag but just ignore it for now.

[hashinclude]

"setTimeout('animatefadein()', 1000);" should be inside the if statement inside animatefadein() function

[Bubbleboy]

Still doesn't work.

[hashinclude]

oh i see, it's because you need to do some type casting

in your code it should be

var current = Number(object.style.opacity);	 
var newopac = current + 0.1;
object.style.opacity = String(newopac);

instead of

var current = object.style.opacity;
var newopac = current + .1;
object.style.opacity = newopac + ' ';

[Bubbleboy]

Still doesn't work.

[Bubbleboy]

I found some other code on the internet. I hate java. I will never be able to script in it.

[hashinclude]

if you're still interested, i fixed your code for you

function fadein(objectID){
	object = document.getElementById(objectID);
	object.style.opacity = '0';
	
	animatefadein = function (){
	 if(object.style.opacity < 1){	 
	 var current = Number(object.style.opacity);	 
	var newopac = current + 0.1;
	object.style.opacity = String(newopac);		
	setTimeout('animatefadein()', 200);
	}
	}
	animatefadein();
}

[Bubbleboy]

Thank you so much! Could you please explain what was wrong with my original code and how your code adjusts it? Thanks. Just trying to learn from error here.

[hashinclude]

Thank you so much! Could you please explain what was wrong with my original code and how your code adjusts it? Thanks. Just trying to learn from error here.

it's related to the sub-function "animatefadein()" and the scope of it's parent "fadein(objectID)".
everything inside a function is private to it and exists only during the execution of that function (function scope), because of the setTimeout() you were using, animatefadein() is being called outside the scope of fadein(objectID), and that returns an "undefined" type error, so i made animatefadein globally accessible by assigning the function to a variable (animatefadein = function{})

hope this clarifies it a bit :)

[Bubbleboy]

Not completely, but a little. Thanks guys.

[hashinclude]

you're welcome :)