• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 407
  • Last Modified:

Fading table BOTH in and out

Hello.

I use the following script to fade out the contents of a table.

But I also want be able to fade back in.  Now it goes from solid to faint, but not back from faint to solid.

Any ideas?

Thanks!



<script>
// Thanks, brunobear
// Thanks, ed987

fade = {
    step: 5,
    speed : 20,
    finalOpacity : 30,
    currentOpacity : 100,
    elID : null,
    init : function(el) {
        fade.elID = el;
     if(arguments.length>1)
     {
        fade.currentOpacity=arguments[1];
        fade.finalOpacity=arguments[2];
        fade.speed=arguments[3];
        if(fade.currentOpacity<fade.finalOpacity&&fade.step>0)fade.step*=-1;
     }
     if(arguments.length>4)fade.step=arguments[4];
        if (!document.getElementById(el)) return;
     fade.setOP(fade.currentOpacity);
        fadeInterval = setInterval('fade.doFade()',fade.speed);
    },
    setOP : function(newOpacity) {
     obj = document.getElementById(fade.elID);
     if(newOpacity<10)newOpacity='0'+newOpacity;
        if(newOpacity<100)obj.style.opacity = "."+(newOpacity);else obj.style.opacity = 1;
        obj.style.filter = "alpha(opacity="+newOpacity+")";
        fade.currentOpacity = newOpacity;
    },
    doFade : function(obj) {        
        if (fade.step>0&&(fade.currentOpacity-fade.step>fade.finalOpacity)) {
         fade.setOP(fade.currentOpacity - fade.step);
        }
        else if (fade.step<0&&(fade.currentOpacity-fade.step<fade.finalOpacity)) {
         fade.setOP(fade.currentOpacity - fade.step);
        }
     else {
         fade.setOP(fade.finalOpacity);
            clearInterval(fadeInterval);
        }
    }
}
</script>

<a href=#" onclick="fade.init('myTable','100','20','20','2');return false">Fade Out</a>
<a href=#" onclick="fade.init('myTable','20','100','20','2');return false">Fade Back In</a>

<table id="myTable" width=550 class="mytableclass" background="http://www.google.com/images/logo.gif"><tr><td height=210>cell 1</td><td>cell 2</td><td>cell 3</td></tr></table>
0
hankknight
Asked:
hankknight
  • 5
1 Solution
 
NushiCommented:
When u do the second call it reaches :


        else {
         fade.setOP(fade.finalOpacity);
          clearInterval(fadeInterval);


which sets the opacity the the value u want at the end.

Nushi.

0
 
NushiCommented:
set teh opacity to be -2

<a href=#" onclick="fade.init('myTable','20','99','20','-2');return false">Fade Back In</a>

This will do the job
Nushi.
0
 
NushiCommented:
the 99 should be 100, just tested the value
0
 
NushiCommented:
The explanation is the following:

in the second line you reach thhis part of the code:

        if( fade.currentOpacity < fade.finalOpacity && fade.step>0)
            fade.step*=-1;

the values are:
    if ( 20 <100 && 2>0 )
        >>>> set the opacity to -2

but you want it to be +2
to get from 20 to 100.

Nushi.
0
 
NushiCommented:
you  need to modify it to the "other way"

   if( fade.currentOpacity < fade.finalOpacity && fade.step<0)
            fade.step*=-1;

Nushi.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now