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

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>
0
hankknight
Asked:
hankknight
  • 3
  • 2
1 Solution
 
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
 
brunoCommented:
step in a nice addition, as setInterval seems to have limits on the speed it can handle
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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