Fading text

**atomique** · 02-08-2008, 04:09 PM

Hello. I'm trying to make some tabbed content text fade in when the tab is selected. I have this script working:

HTML Code:

<script language="JavaScript">

hex=255// Initial color value.

function fadetext()

{

if(hex>0)

{//If color is not black yet

hex-=11;// increase color darkness

document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";

setTimeout("fadetext()",100);

}

else

hex=255//reset hex value

}

</script>

The only thing is, I can't make the ending color anything but black. I've tried putting a hex code in place of the rgb("+hex+","+hex+","+hex+"), and changing the value in the hex < 0 command. Any ideas why it's not working? The text will show up as the color I want it to be, but there is no fading.

Thanks for any help you can give!

**jscheuer1** · 02-08-2008, 04:43 PM

You could change it to:

Code:

if(hex>68)

Then you would end up with some shade of gray, not black. But to get it to be a color, you would need to initialize 3 'hex' values and decrement each one individually toward the desired color.

**atomique** · 02-08-2008, 04:51 PM

Thanks. I tried changing

style.color=rgb("+hex+","+hex+","+hex+")

to

style.color=rgb(102,102,139)

and it gives me the color I want, but it disables the fade in. I also tried

style.color="#666699"

with the same result. I get the color, but no fade in.

**jscheuer1** · 02-08-2008, 10:03 PM

Try this out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text Fader - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/* Text Fader Script ©2008 John Davenport Scheuer
 * This notice must remain for legal use
 * As first seen in http://www.dynamicdrive.com/forums/ */

function fadetext(id, init, targ, speed){
var f=fadetext;
if(f[id]&&f[id].t)
clearTimeout(f[id].t)
if(init){
f[id]={};
f[id].r=init[0],f[id].g=init[1],f[id].b=init[2];
var t=255; f[id].m=[]
f[id].m[0]=f[id].r<targ[0]? -1 : f[id].r>targ[0]? 1 : 0;
f[id].m[1]=f[id].g<targ[1]? -1 : f[id].g>targ[1]? 1 : 0;
f[id].m[2]=f[id].b<targ[2]? -1 : f[id].g>targ[2]? 1 : 0;
for (var i = 0; i < init.length; i++)
if(init[i]-targ[i])
t=Math.min(t,Math.abs(init[i]-targ[i]));
f[id].rt=Math[f[id].m[0]>0?'floor':'ceil']((f[id].r-targ[0])/t);
f[id].gt=Math[f[id].m[1]>0?'floor':'ceil']((f[id].g-targ[1])/t);
f[id].bt=Math[f[id].m[2]>0?'floor':'ceil']((f[id].b-targ[2])/t);
}

if(f[id].r==targ[0]&&f[id].g==targ[1]&&f[id].b==targ[2])//If color is back
return; //exit

if(f[id].m[0]&&f[id].r>targ[0]*f[id].m[0])
f[id].r=Math[f[id].m[0]>0?'max':'min'](f[id].r-f[id].rt,targ[0]);// increase/decrease red darkness
if(f[id].m[1]&&f[id].g>targ[1]*f[id].m[1])
f[id].g=Math[f[id].m[1]>0?'max':'min'](f[id].g-f[id].gt,targ[1]);// increase/decrease green darkness
if(f[id].m[2]&&f[id].b>targ[2]*f[id].m[2])
f[id].b=Math[f[id].m[2]>0?'max':'min'](f[id].b-f[id].bt,targ[2]);// increase/decrease blue darkness

document.getElementById(id).style.color="rgb("+f[id].r+","+f[id].g+","+f[id].b+")";

f[id].t=setTimeout(function(){fadetext(id, false, targ, speed);},speed);

}

</script>
</head>
<body>
<div id="sample" style="color:rgb(0, 128, 0);">
Hey there!
</div>
<input type="button" onclick="fadetext('sample', [255,255,255], [0,128,0], 20);" value="fade">
<div id="sample2" style="background-color:rgb(0, 128, 0);color:white;">
Hey there!
</div>
<input type="button" onclick="fadetext('sample2', [0,128,0], [255,255,255], 20);" value="fade">
</body>
</html>

**atomique** · 02-09-2008, 06:50 PM

Awesome, that works! Thanks so much!

Thread: Fading text

Thread Tools

Search Thread

Fading text

Bookmarks

Bookmarks

Posting Permissions