Solved

Fading IN and OUT from JS function

Posted on 2006-07-05
6
4,293 Views
Last Modified: 2008-03-06
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
Comment
Question by:hankknight
  • 3
  • 2
6 Comments
 
LVL 7

Expert Comment

by:ed987
ID: 17050110
<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
 
LVL 7

Accepted Solution

by:
ed987 earned 500 total points
ID: 17050275
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
 
LVL 18

Expert Comment

by:bruno
ID: 17053073
step in a nice addition, as setInterval seems to have limits on the speed it can handle
0
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.

 
LVL 7

Expert Comment

by:ed987
ID: 17054133
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
 
LVL 16

Author Comment

by:hankknight
ID: 17059139
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
 
LVL 16

Author Comment

by:hankknight
ID: 17060935
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

840 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