Fading IN and OUT from JS function

Hello,

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

It works great, but now I would like a little more control over it.

It works great for fading out, but I want to be able to fade in and out, and control the speed.


Like this:

    fadeMyTable (NAME_OF_ID,CURRENT_OPACITY,FINAL_OPACTITY,SPEED)

For example:

    fadeMyTable ('myTable',100,30,10)
     - This should start at 100% opacity and fade to 30% slowly

    fadeMyTable ('myTable',100,30,1)
     - This should start at 30% opacity and return to 100% QUICKLY


Any ideas?

Thanks!


<script>
// Thanks, brunobear
fade = {
    speed : 5,
    finalOpacity : 30,
    currentOpacity : 100,
    elID : null,
    init : function(el) {
        fade.elID = el;
        if (!document.getElementById(el)) return;
            fadeInterval = setInterval('fade.doFade()',fade.speed);
    },
    doFade : function(obj) {
        obj = document.getElementById(fade.elID);
        if (fade.currentOpacity>fade.finalOpacity) {
            var newOpacity = fade.currentOpacity - 1;
            obj.style.opacity = "."+(newOpacity);
            obj.style.filter = "alpha(opacity="+newOpacity+")";
            fade.currentOpacity = newOpacity;
        } else {
            clearInterval(fadeInterval);
        }
    }
}
</script>

<a href=#" onclick="fade.init('myTable');return false">fade table</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>
LVL 16
hankknightAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ed987Commented:
<script>
// Thanks, brunobear
fade = {
    step: 18,
    speed : 0.1,
    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*=-1;
      }
      if(arguments.length>4)fade.step=arguments[4];
        if (!document.getElementById(el)) return;
            fadeInterval = setInterval('fade.doFade()',fade.speed);
    },
    doFade : function(obj) {
        obj = document.getElementById(fade.elID);
        if (fade.step>0&&(fade.currentOpacity-fade.step>fade.finalOpacity)) {
            var newOpacity = fade.currentOpacity - fade.step;
          if(newOpacity<10)newOpacity='0'+newOpacity;
            obj.style.opacity = "."+(newOpacity);
            obj.style.filter = "alpha(opacity="+newOpacity+")";
            fade.currentOpacity = newOpacity;
        }
        else if (fade.step<0&&(fade.currentOpacity-fade.step<fade.finalOpacity)) {
            var newOpacity = fade.currentOpacity - fade.step;
          if(newOpacity<10)newOpacity='0'+newOpacity;
            obj.style.opacity = "."+(newOpacity);
            obj.style.filter = "alpha(opacity="+newOpacity+")";
            fade.currentOpacity = newOpacity;
        }
      else {
          var newOpacity = fade.finalOpacity;
          if(newOpacity<10)newOpacity='0'+newOpacity;
            obj.style.opacity = "."+(newOpacity);
            obj.style.filter = "alpha(opacity="+newOpacity+")";
            fade.currentOpacity = newOpacity;
            clearInterval(fadeInterval);
        }
    }
}
</script>
0
ed987Commented:
a few corrections, and extra optional parameter step
(NAME_OF_ID,CURRENT_OPACITY,FINAL_OPACTITY,SPEED,   STEP)
which could make transition faster, but less smooth

<script>
// Thanks, brunobear
fade = {
    step: 5,
    speed : 0.1,
    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>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brunoCommented:
step in a nice addition, as setInterval seems to have limits on the speed it can handle
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ed987Commented:
btw " speed : 0.1," is a mistake, i just set it initially as
i was surprised fade with initial settings was quite slow and didn't yet read source code.
might be best if you didn't use speed values below 20, try to increase step instead.
0
hankknightAuthor Commented:
Thank you!

The fading out works, but the fading back in does not:

<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 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
hankknightAuthor Commented:
Hello,

Thanks for the answer!

I have decided that my above comment is actually another separate question, so I have posted it here.
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21911851.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.