This a quick and simple demo fading the link texts from balck to white on mouseover and then back to black onmouseout.
It's limited atm to basically having the start and end rgb colour values to be the same eg 0,0,0 start and 255,255,255 end.
I have to go soon but I'll be back in about 6 hours from this post and if no-one does so in the mean time, I'll post a more generic version where the start/end rgb colours can be anything.
You can add as many links as you like without having to touch the javascript.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var colourIncr = 10;
var speed = 100;
function setColour(obj){
obj.redCurr += 10;
if(obj.redCurr > obj.redEnd) {obj.redCurr = obj.redEnd;}
obj.greenCurr += 10;
if(obj.greenCurr > obj.greenEnd) {obj.greenCurr = obj.greenEnd;}
obj.blueCurr += 10;
if(obj.blueCurr > obj.blueEnd) {obj.blueCurr = obj.blueEnd;}
obj.style.color = 'rgb('+obj.redCurr+', '+ obj.greenCurr + ', '+ obj.blueCurr +')';
obj.timer = setTimeout(function(){setColour(obj)},speed);
}
window.onload=function(){
oLinks = document.getElementById('topnav').getElementsByTagName('a');
for(i=0; i < oLinks.length; i++){
oLinks[i].redStart = oLinks[i].greenStart = oLinks[i].blueStart = 0;
oLinks[i].redCurr = oLinks[i].greenCurr = oLinks[i].blueCurr = 0;
oLinks[i].redEnd = oLinks[i].greenEnd = oLinks[i].blueEnd = 255;
oLinks[i].style.color = 'rgb('+oLinks[i].redCurr+', '+ oLinks[i].greenCurr +', '+ oLinks[i].blueCurr +')';
oLinks[i].onmouseover=function(){setColour(this);}
oLinks[i].onmouseout=function(){
clearTimeout(this.timer);
this.style.color = 'rgb('+this.redStart+', '+ this.greenStart +', '+ this.blueStart +')';
this.redCurr = this.greenCurr = this.blueCurr = 0;
}
}
}
</script>
</head>
<body>
<ol id="topnav">
<li><a href="#">portfolio</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ol>
</body>
</html>