...

View Full Version : Help with a color fader, not going fast enough!



Single Paradox
10-13-2005, 03:24 AM
Can someone help me with my mouseover link color fader? It isn't fading fast enough even though the setTimeout is on 0, how can I make the variable subtract more each time the function is called? Ok here is my code:




<script>

var i=255;
var Timer;

function fade(id) {
if(i>=50){
clearTimeout(Timer);
window.status=i;
document.getElementById(id).style.color='rgb('+ i-- +',255,'+ i +')';
Timer=setTimeout(function() {fade(id)},0);
}else{
clearTimeout(Timer);
}
}

function fadeout(id) {
if(i<=255){
clearTimeout(Timer);
window.status=i;
document.getElementById(id).style.color='rgb('+ i++ +',255,'+ i +')';
Timer=setTimeout(function() {fadeout(id)},0);
}else{
clearTimeout(Timer);
}
}

</script>

<body bgcolor="black">

<a id="yus" style="color:#FFFFFF;font-size:40px;font-weight:bold;" onmouseover="fade(this.id);" onmouseout="fadeout(this.id);" href="http://www.singleparadox.com">YUS</a><br>

ImperialSpider
10-13-2005, 05:19 AM
within your code, simply change all instances of the number 255 to a lower number, such as 200 or 150 or even 100. Or you could raise the number 50 to a higher number like 100 or 125.

If you are wanting the link to show all of the colors that currently show, then your current speed is as fast as it will be able to go.

nice code, though.

Hope this helps,

Imperial Spider

Single Paradox
10-13-2005, 05:22 AM
thank you for the reply :thumbsup: I actually fixed it though, for anyone that was having the same problem, look at this:




<script>

var i=0;
var j=0;
var k=0;
var Timer;


function fade(id) {
if(k<=164){
clearTimeout(Timer);
window.status=i+" "+j+" "+k;
document.getElementById(id).style.backgroundColor='rgb('+ i +','+ j +','+ k +')';
i=i+3;
j=j+5;
k=k+5;
Timer=setTimeout(function() {fade(id)},0);
}else{
clearTimeout(Timer);
}
}

function fadeout(id) {
if(k>=0){
clearTimeout(Timer);
window.status=i+" "+j+" "+k;
document.getElementById(id).style.backgroundColor='rgb('+ i +','+ j +','+ k +')';
i=i-3;
j=j-5;
k=k-5;
Timer=setTimeout(function() {fadeout(id)},0);
}else{
clearTimeout(Timer);
}
}

</script>

<style>
a{font-variant:small-caps;
color:#FFFFFF;
text-decoration:none;
padding-left:25px;
font-weight:bold;
width:250px;
border:1px solid white;
background:url('http://www.singleparadox.com/images/DD_li_over.gif') no-repeat left;
}

</style>

<body bgcolor="black">

<a id="yus" onmouseover="fade(this.id);" onmouseout="fadeout(this.id);" href="http://www.singleparadox.com">Home</a><br>
<a id="yus2" onmouseover="fade(this.id);" onmouseout="fadeout(this.id);" href="http://www.singleparadox.com">Links</a><br>
<a id="yus3" onmouseover="fade(this.id);" onmouseout="fadeout(this.id);" href="http://www.singleparadox.com">Music</a><br>
<a id="yus4" onmouseover="fade(this.id);" onmouseout="fadeout(this.id);" href="http://www.singleparadox.com">Contact</a><br>



As of now I am working on a script that makes a variable each time it sees a link, therefore multiple fades can happen at once. I will post that as well when I am done. Thanks again ImperialSpider.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum