Solved

Fading table BOTH in and out

Posted on 2006-07-07
5
379 Views
Last Modified: 2008-01-09
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
Comment
Question by:hankknight
  • 5
5 Comments
 
LVL 10

Expert Comment

by:Nushi
ID: 17061194
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
 
LVL 10

Accepted Solution

by:
Nushi earned 500 total points
ID: 17061221
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
 
LVL 10

Expert Comment

by:Nushi
ID: 17061237
the 99 should be 100, just tested the value
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061326
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
 
LVL 10

Expert Comment

by:Nushi
ID: 17061551
you  need to modify it to the "other way"

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

Nushi.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now