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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gradually fade in trouble. (Not the one from DD)

    here is my code:

    Code:
     
    
    <html>
    <head>
    <script>
    
    var Timer1;
    var Timer2;
    var google1=10;
    var google2=10;
    
    
    function fadeIn(ID,which,which2){
    if(which2*2<=80){
    clearTimeout("Timer"+which);
    document.getElementById(ID).filters.alpha.opacity=which2*2;
    which2++;
    window.status=document.getElementById(ID).filters.alpha.opacity;
    window["Timer"+which]=setTimeout(function() {fadeIn(ID,which,which2)},0);
    }else{
    clearTimeout("Timer"+which);
    }
    }
    function fadeOut(ID,which,which2){
    if(which2*2>=20){
    clearTimeout("Timer"+which);
    document.getElementById(ID).filters.alpha.opacity=which2*2;
    which2--;
    window.status=document.getElementById(ID).filters.alpha.opacity;
    window["Timer"+which]=setTimeout(function() {fadeOut(ID,which,which2)},0);
    }else{
    clearTimeout("Timer"+which);
    }
    }
    </script>
    </head>
    <body onload="window.status=document.getElementById('fade1').filters.alpha.opacity;" background="http://www.singleparadox.com/images/bg.gif">
    <br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <div id="fade1" onmouseover="fadeIn(this.id,1,google1)" onmouseout="fadeOut(this.id,1,google1);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
    Some Text Some Text Some Text
    </div><br>
    <div id="fade2" onmouseover="fadeIn(this.id,2,google2)" onmouseout="fadeOut(this.id,2,google2);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
    Some Text Some Text Some Text
    </div>
    </body>
    </html>
    It is in internet explorer only at this time because I want to get it working before I solve X-browser things. I have two problems with this code. One is that it doesn't fade out, it just goes straight to 20% opacity. The other problem is that when I move my mouse over one div and then over the other really quick, the first div doesn't fade out (or at least go straight to 20%). Because I am using different variables each time the functions are called, shouldn't it not clash with a seperate calling of the function? Did I reference the variables to be called incorrectly?

    In short I want it to work just like the code shown here: http://www.dynamicdrive.com/dynamici...lightgrad2.htm

    But I am stubborn and proud and I don't want to copy another code.
    Last edited by Single Paradox; 08-18-2005 at 02:17 AM.
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anyone help me please? It must be in the setTimeout and clearTimeout variables because everything else works fine. Am I referencing them wrong?
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind, I fixed it!! Here is the code:

    Code:
    <html>
    <head>
    <script>
    
    var Timer1;
    var Timer2;
    
    
    function fadeIn(ID,which){
    if(document.getElementById(ID).filters.alpha.opacity<=80){
    clearTimeout("Timer"+which);
    document.getElementById(ID).filters.alpha.opacity+=5*1;
    window.status=document.getElementById(ID).filters.alpha.opacity;
    window["Timer"+which]=setTimeout(function() {fadeIn(ID,which)},0);
    }else{
    clearTimeout("Timer"+which);
    }
    }
    function fadeOut(ID,which){
    if(document.getElementById(ID).filters.alpha.opacity>=20){
    clearTimeout("Timer"+which);
    document.getElementById(ID).filters.alpha.opacity+=5*-1;
    window.status=document.getElementById(ID).filters.alpha.opacity;
    window["Timer"+which]=setTimeout(function() {fadeOut(ID,which)},0);
    }else{
    clearTimeout("Timer"+which);
    }
    }
    </script>
    </head>
    <body onload="window.status=document.getElementById('fade1').filters.alpha.opacity;" background="http://www.singleparadox.com/images/bg.gif">
    <br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <div id="fade1" onmouseover="fadeIn(this.id,1)" onmouseout="fadeOut(this.id,1);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
    Some Text Some Text Some Text
    </div><br>
    <div id="fade2" onmouseover="fadeIn(this.id,2)" onmouseout="fadeOut(this.id,2);" style="filter:alpha(opacity=20);border:1px solid black;height:100px;width:500px;background:blue;">
    Some Text Some Text Some Text
    </div>
    </body>
    </html>
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, actually I have come across another problem, when I move my mouse over one of them and move it out before it gets to 80 opacity, it stops and flickers a little.
    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
    •