asked on

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>

Nushi

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.

ASKER CERTIFIED SOLUTION

Nushi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Nushi

the 99 should be 100, just tested the value

Nushi

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.

Nushi

you need to modify it to the "other way"

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

Nushi.