Solved

Fading IN and OUT from JS function

Posted on 2006-07-05
6
4,287 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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.
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…

743 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

12 Experts available now in Live!

Get 1:1 Help Now