Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with a color fader, not going fast enough!

    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:

    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>
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    San Antonio, TX
    Posts
    131
    Thanks
    1
    Thanked 0 Times in 0 Posts

    if all you want is for the color change to go faster...

    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

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you for the reply I actually fixed it though, for anyone that was having the same problem, look at this:

    Code:
    <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.
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •