0

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.

2
Contributors
10
Replies
11
Views
7 Years
Discussion Span
Last Post by hashinclude
0

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

Edited by hashinclude: n/a

0

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 + ' ';
0

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

0

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();
}
0

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.

0

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 :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.