kippie
Technical User
- Nov 8, 2001
- 158
I have a HTML to fade in different texts independent of each other. In the HTML below there are 2 texts fading in, the first one second after loading and the second, 2 seconds after loading. Text1 fades in nicely, but text2 doesn't seem to fade in at all. It just appears in a fraction of a second. And I don't know why. It seems the fadein of text1 and text2 somehow interfere with each other. Can anyone help?
<html>
<head>
</head>
<body>
<div id="divtofade" style="filter:alpha(opacity=0); width:250;">
<h1>text1</h1>
</div>
<div id="divtofade2" style="filter:alpha(opacity=0); width:250;">
<h1>text2</h1>
</div>
<script language="JavaScript">
function doFadeIn(fadeName,maxPct)
{
var fadeObj = document.getElementById(fadeName)
if (fadeObj.filters.alpha.opacity < maxPct)
{
fadeObj.filters.alpha.opacity=divtofade.filters.alpha.opacity+4
setTimeout("doFadeIn('" + fadeObj.id + "'," + maxPct + "
",50)
}
}
setTimeout("doFadeIn('divtofade',100)",1000)
setTimeout("doFadeIn('divtofade2',100)",2000)
</script>
</body>
</html>
Kippie
<html>
<head>
</head>
<body>
<div id="divtofade" style="filter:alpha(opacity=0); width:250;">
<h1>text1</h1>
</div>
<div id="divtofade2" style="filter:alpha(opacity=0); width:250;">
<h1>text2</h1>
</div>
<script language="JavaScript">
function doFadeIn(fadeName,maxPct)
{
var fadeObj = document.getElementById(fadeName)
if (fadeObj.filters.alpha.opacity < maxPct)
{
fadeObj.filters.alpha.opacity=divtofade.filters.alpha.opacity+4
setTimeout("doFadeIn('" + fadeObj.id + "'," + maxPct + "
",50) }
}
setTimeout("doFadeIn('divtofade',100)",1000)
setTimeout("doFadeIn('divtofade2',100)",2000)
</script>
</body>
</html>
Kippie