Javascript Tutorial - Simple Fade Animation

Skill

Javascript Tutorial - Simple Fade Animation

Posted in:

Woohoo fading! Everyone loves fading in and out, it is an excellent way to transition between two segments of an application (unless the fade takes too long, and then it just gets annoying). Today we are going to look at a simple and robust way of creating a fade in or fade out effect using javascript and the simple css 'opacity' element.

In the example below, you can see a green box with some text, and a button beneath it. If you press the button, the green box will fade out and become fully transparent, and if you press the button a second time, the box will fade back in. As you can see with the text inside of the box, anything that is a child of the fading element will also fade away/fade back. And, if you've clicked the button enough times, you've probably noticed that if you click it while the box is fading in one direction, it will flip and start fading in the opposite direction.

I'm Some Text

So how is all of this done? Well, it is actually pretty simple - we are doing an animation across the 'opacity' css element. We have done animation enough times in javascript in various tutorial on the blog that the code below will probably give you a sense of deja-vu. This is because the structure is very similar to some of the other animation code that we have done here, especially Accordion menus. Below, we have the function that kicks off the fade animation. I'll explain what it does after the code:

var TimeToFade = 1000.0;

function fade(eid)

{

  var element = document.getElementById(eid);

  if(element == null)

    return;

  if(element.FadeState == null)

  {

    if(element.style.opacity == null 

        || element.style.opacity == '' 

        || element.style.opacity == '1')

    {

      element.FadeState = 2;

    }

    else

    {

      element.FadeState = -2;

    }

  }

  if(element.FadeState == 1 || element.FadeState == -1)

  {

    element.FadeState = element.FadeState == 1 ? -1 : 1;

    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;

  }

  else

  {

    element.FadeState = element.FadeState == 2 ? -1 : 1;

    element.FadeTimeLeft = TimeToFade;

    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);

  }  

}

This fade function takes an element id, and the first thing we do is resolve it into an element object. The next thing we do is try to resolve its current 'FadeState', which is a property that this function will creates on the element when fade is called on that element for the first time. FadeState is one of 4 numbers - 2 means that the element is fully opaque, 1 means that the element is currently fading from transparent to opaque, -1 means that the element is currently fading from opaque to transparent, and -2 means that the element is fully transparent. If the FadeState property doesn't exist, we try and determine it from the state of the opacity css element.

If the FadeState is 1 or -1, it means that an animation is currently in progress. To flip the animation's direction, we flip the fade state, and flip the amount of time left to do the animation. So say we had an element that was fading out (a FadeState of -1), and we had 50 milliseconds left in the animation (out of a total of 500). If fade was called again on the element at that time, the FadeState would be flipped to 1 and the time left would be flipped to 450 (i.e., 500 - 50).

Otherwise, if the element is not currently fading in either direction, we set the fade state appropriately (if its opaque, we want to go to transparent, and if its transparent we want to go opaque), set the time to fade (FadeTimeLeft) to the full amount, and call setTimeout on the fade animation function. And this leads us right into the next chunk of code, the animateFade function:

function animateFade(lastTick, eid)

{  

  var curTick = new Date().getTime();

  var elapsedTicks = curTick - lastTick;

  var element = document.getElementById(eid);

  if(element.FadeTimeLeft <= elapsedTicks)

  {

    element.style.opacity = element.FadeState == 1 ? '1' : '0';

    element.style.filter = 'alpha(opacity = ' 

        + (element.FadeState == 1 ? '100' : '0') + ')';

    element.FadeState = element.FadeState == 1 ? 2 : -2;

    return;

  }

  element.FadeTimeLeft -= elapsedTicks;

  var newOpVal = element.FadeTimeLeft/TimeToFade;

  if(element.FadeState == 1)

    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;

  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);

}

As always, the first thing we do inside an animation function is figure out how much time has passed since the animation was last updated. If this amount of time is more than the amount of time left in the animation, we set the element's opacity to the final value (fully transparent if the fade state is -1, and fully opaque if the fade state is 1), and then we return out.

So how do we actually set opacity? Well, for Firefox, Safari, and Opera, it is the CSS element 'opacity'. When 'opacity' is set to 0, the it means fully transparent, and when it is set to '1' it means fully opaque. Of course, IE does something completely different. For opacity in Internet Explorer, you have to set the 'filter' CSS element. And of course, you can't set it with the same values as the opacity element. For IE, "alpha(opacity=0)" is the value to set something transparent, and "alpha(opacity=100)" is how to set something opaque.

Back to the function at hand. Well, if we aren't out of time in the animation, we figure out what percentage opaque we are supposed to be at this current time in the animation. This is accomplished by a simple division of the amount of time left over the total amount of time in the animation. If you are fading out, this is the the new opacity value, and if you are fading in, the new value is 1 minus this figure.

Then, all we need to do is set the new opacity value, and then set another setTimeout to continue the animation.

I bet your wondering now about the html behind the example above. Well, as you can see below, there is virtually nothing there:

<div id="fadeBlock" style="background-color:Lime;width:250px;

       height:65px;text-align:center;">

  <br />

  I'm Some Text

</div>

<br />

<br />

<input type="button" onclick="fade('fadeBlock');" value="Go" />

The only important part is that the click handler for the button calls the fade function with the appropriate element id - in this case 'fadeBlock'.

That is it for doing a simple fade in/fade out animation in javascript. If anyone has any questions they should leave a comment below.

43 comments

JaredC
12/26/2007 - 10:05

Hi there,

How would you make the box disappear after fading away? (eg. display = none)

Thanks

Vikas
01/13/2008 - 23:43

Dear Sir,

Thanks for the code. But what if I have a set of 5 or more text boxes and want them to appear one after another at an interval of say 20 seconds in a loop.

That is I do not want that the user should press the 'GO' button for the effect to take place, rather it should keep happening on the page automatically

Thanks in advance for the support.

Penguinking
01/14/2008 - 16:50

ie4 = ((navigator.appVersion.indexOf("MSIE") > 0) 

    && (parseInt(navigator.appVersion) <= 4)); 

var count = 0, count2 = 0, add1 = 3, 

    add2 = 10, timerID; 

function show() 

{ 

  if (ie4)

  {

    count += add1; 

    count2 += add2; 

    delay = 30; 

    if(count2 > 100)

      count2 = 100; 

    if(count > 100)

    { 

      count = 100; 

      add1 = -10; 

      add2 = -3; 

      delay = 350; 

    } 

    if(count

look im flashing!

there is something like you requested vikas but i havent been able to figure out how to get the time changing in there so it says something else after a matter of time. also tell me if u see any flaws in the code ty.

Penguinking
01/14/2008 - 16:51

opps lol it read it as code.

Fouad Masoud
02/18/2008 - 02:14

Gr8 work there.
but i noticed a bug in IE (counts for 7 and 6) if you remove the height specified as inline style on the faded element it stops the fade any idea why ?

Shadwick
02/25/2008 - 21:47

This works great! I tried but couldn't find how to make it so that it will fade to a 50% opacity minimum... could you tell me what change to make because I couldn't figure it out. Thanks!

The Tallest
02/26/2008 - 07:22

Sure. You'll need to do two things. First, you need to modify the where the final values are set. Instead of:

element.style.opacity = element.FadeState == 1 ? '1' : '0';

element.style.filter = 'alpha(opacity = '

    + (element.FadeState == 1 ? '100' : '0') + ')';

You need to say:

element.style.opacity = element.FadeState == 1 ? '1' : '0.5';

element.style.filter = 'alpha(opacity = '

    + (element.FadeState == 1 ? '100' : '50') + ')';

Next, to fix what happens during the animation, what you need to do is modify newOpVal after it has been calculated, but before it is used to set the opacity. So instead of this:

element.style.opacity = newOpVal;

element.style.filter =

    'alpha(opacity = ' + (newOpVal*100) + ')';

You need to say something like:

newOpVal = newOpVal/2 + 0.5;

element.style.opacity = newOpVal;

element.style.filter =

    'alpha(opacity = ' + (newOpVal*100) + ')';

And now you should be all set.

Shadwick
02/26/2008 - 20:28

Thanks you so much! This works great.

Peter
03/05/2008 - 19:16

Thank you for this! It worked great for a prototype I was doing. I had to modify it as follows:

1) starts invisible and fades up
2) fades up to .8 and back to 0
3) added switches for style.display (answers JaredC's initial request)

Note that in my case the initial css on the element also needs to be set appropriately. Here's my modified code:

var TimeToFade = 250.0;

function fade(eid)

{

  var element = document.getElementById(eid);

  if(element == null)

    return;

  if(element.FadeState == null)

  {

    if(element.style.opacity == null

        || element.style.opacity == ''

        || element.style.opacity == '0.8')

    {

      element.FadeState = -2;

    }

    else

    {

      element.FadeState = 2;

    }

  }

  if(element.FadeState == 1 || element.FadeState == -1)

  {

    element.FadeState = element.FadeState == 1 ? -1 : 1;

    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;

  }

  else

  {

    element.FadeState = element.FadeState == 2 ? -1 : 1;

    element.FadeTimeLeft = TimeToFade;

    element.style.display = element.FadeState == 2 

        ? 'none' : 'block';

    setTimeout("animateFade(" + new Date().getTime()

        + ",'" + eid + "')", 33);

  } 

}

function animateFade(lastTick, eid)

{ 

  var curTick = new Date().getTime();

  var elapsedTicks = curTick - lastTick;

  var element = document.getElementById(eid);

  if(element.FadeTimeLeft <= elapsedTicks)

  {

    element.style.display = element.FadeState == 1 

        ? 'block' : 'none';

    element.style.opacity = element.FadeState == 1 

        ? '.85' : '0';

    element.style.filter = 'alpha(opacity = '

        + (element.FadeState == 1 ? '85' : '0') + ')';

    element.FadeState = element.FadeState == 1 ? 2 : -2;

    return;

  }

  element.FadeTimeLeft -= elapsedTicks;

  var newOpVal = element.FadeTimeLeft/TimeToFade;

  if(element.FadeState == 1)

    newOpVal = 1 - newOpVal;

  newOpVal = newOpVal*0.85;

  element.style.opacity = newOpVal;

  element.style.filter =

      'alpha(opacity = ' + (newOpVal*100) + ')';

  setTimeout("animateFade(" + curTick

      + ",'" + eid + "')", 33);

}

#elementid {

  filter: alpha(opacity=0);

  -moz-opacity: 0;

  display:none;

}

If I were to use this for production code, I might implement variables for the direction and min/max opacity.

Good site guys. I'll be back!

Dazed
09/07/2008 - 13:30

if Peter's code would work i'd appreciate it, i tried replacing everything but it just doesn't work, what i want is something that fades IN on the first try, then fades out when the fade function is used again.

Shaw
02/27/2009 - 15:39

I modified this code in a couple of ways that I personally needed.

1. Instead of display: none / block (which causes elements around to be shifted whenever the content fades in), I switched it to visibility: hidden / visible.

2. The script now only fades in, and will not fade out. This is on purpose, because I wanted some content to fade in when the page loaded, but the user could click a link to show it instantly. Previously, if they clicked that link prematurely, the content would fade out when it was normally scheduled to fade in.

var TimeToFade = 2000.0;

function fade(eid)

{

  var element = document.getElementById(eid);

  if(element == null)

    return;

  if(element.FadeState == null)

  {

    if(element.style.opacity == null

        || element.style.opacity == ''

        || element.style.opacity == '1')

    { element.FadeState = -2; }

    else

    { element.FadeState = 2; }

  }

  if(element.FadeState == 1 || element.FadeState == -1)

  {

    element.FadeState = element.FadeState == 1 ? -1 : 1;

    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;

  }

  else

  {

    element.FadeState = element.FadeState == 2 ? -1 : 1;

    element.FadeTimeLeft = TimeToFade;

    element.style.visibility = element.FadeState == 2

        ? 'hidden' : 'visible'; // Switch visibility style rather than Dislay

    setTimeout("animateFade(" + new Date().getTime()

        + ",'" + eid + "')", 33);

  }

}

function animateFade(lastTick, eid)

{

  var curTick = new Date().getTime();

  var elapsedTicks = curTick - lastTick;

  var element = document.getElementById(eid);

  if(element.FadeTimeLeft <= elapsedTicks)

  {

    element.style.visibility = element.FadeState == 1 ? 'visible' : 'hidden'; // Switch visibility style rather than Dislay

    element.style.opacity = element.FadeState == 1 ? '1' : '0';

    element.style.filter = 'alpha(opacity = '

        + (element.FadeState == 1 ? '100' : '0') + ')';

    //element.FadeState = element.FadeState == 1 ? 2 : -2; // This code is commented out to prevent a fade out

    return;

  }

  element.FadeTimeLeft -= elapsedTicks;

  var newOpVal = element.FadeTimeLeft/TimeToFade;

  if(element.FadeState == 1)

    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;

  element.style.filter =

      'alpha(opacity = ' + (newOpVal*100) + ')';

  setTimeout("animateFade(" + curTick

      + ",'" + eid + "')", 33);

}

If you don't need these changes, then use the other code examples. If you know of a better way to implement it, please share!

Pawan Soni
05/11/2008 - 22:31

really its very good idea for using opacity ....

thanks my problem has solved

Human
05/23/2008 - 10:16

Hey, sweet little bit of code. I'm not a programmer by nature;rather a designer. My question is, is it possible to "inject" this code into Spry Sliding panels so they fade instead of sliding? Or, using them on their own, have the current visible block of info fade into the next block of info when a different button is clicked?

Thx in advance either way :P)

Tim van Elsloo
05/29/2008 - 08:07

It was very handy,
Thank you very much!

Rajashri
05/30/2008 - 00:26

This is for line

setTimeout("animateFade(" + new Date().getTime() + ",’" 

    + eid + "‘)", 33);

Can I do it without the new Date().getTime()? just manually giving the milliseconds and incrementing it?
Thanks

Roy
06/24/2008 - 22:56

Hey, I'm still messing around with the code, but is there a way to set it to 0 on start, then to 100?

I'm trying to set this as something that fades in on click, i have the CSS style set to "display:none" but that kills the whole thing... any ideas how to reverse it?

sorry if it is stated somewhere, i'll re-read this whole page once more also.

Roy
06/24/2008 - 23:58

Okay, figure out my last issue,

now to read more, unless someone can answer how to use this on multiple id's like i have multiple div's I want to fadein/out but not using the same onclick.. so they are all seperated...

and my quest begins

Roy
06/25/2008 - 00:02

okay, love the script, figure otu everything i need to know.. but

how do i actually get rid of the divs, 'cause even though transparent, they are taking up space and blocking other things.

any ideas?

Mohit
07/17/2008 - 18:01

how can i use a image to fade out and another image to fade in after fadding out the first one on click a button

please advice
Mohit

Ryno
07/18/2008 - 08:31

Lets say i want to fade from 40 to 100 and back to 40 ??

Ryno
07/18/2008 - 08:40

NVM i got it .. just put newOpVal += 0.4;

Ryan
08/27/2008 - 20:17

For those who want to remove the element after fading out, just use:

document.body.removeChild(element);

just before the return; in function "animateFade".

Julian
08/28/2008 - 07:21

i first tried some stuff and changed the code by myself... then i saw that this was already disscussed and copyied it but it was exactly the opposit from what i wanted to get :D

i wanted to fade from 0 to 50
and then back to 0

but now i changed and changed things arround and it doesn't start at 50 it allways goes to full opacity on fadeout...
this sucks :D
can someone help me out with that problem??

here is the code i had...

function timmer (status) {

  document.getElementById("timmerhg").style.visibility =   

    status;

}

var TimeToFade = 1000.0;

function fade(status)

{

  var element = document.getElementById(status);

  if(element == null)

    return;

  if(element.FadeState == null)

  {

    if(element.style.opacity == null

        || element.style.opacity == '0.5'

        || element.style.opacity == '')

    {

      element.FadeState = -2;

    }

    else

    {

      element.FadeState = 2;

    }

  }

  if(element.FadeState == 0.5 || element.FadeState == -0.5)

  {

    element.FadeState = element.FadeState == 0.5 ? -0.5 : 0.5;

    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;

  }

  else

  {

    element.FadeState = element.FadeState == 2 ? -0.5 : 0.5;

    element.FadeTimeLeft = TimeToFade;

    setTimeout("animateFade(" + new Date().getTime()

        + ",'" + status + "')", 33);

  } 

}

function animateFade(lastTick, eid)

{ 

  var curTick = new Date().getTime();

  var elapsedTicks = curTick - lastTick;

  var element = document.getElementById(eid);

  if(element.FadeTimeLeft <= elapsedTicks)

  {

    element.style.opacity = element.FadeState == 0.5 

        ? '0.5' : '0';

    element.style.filter = 'alpha(opacity = '

        + (element.FadeState == 0.5 ? '0.5' : '0') + ')';

    element.FadeState = element.FadeState == 0.5 ? 2 : -2;

    return;

  }

  element.FadeTimeLeft -= elapsedTicks;

  var newOpVal = element.FadeTimeLeft/TimeToFade;

  if(element.FadeState == 0.5)

    newOpVal = 0.5 - newOpVal;

  element.style.opacity = newOpVal;

  element.style.filter =

      'alpha(opacity = ' + (newOpVal*50) + ')';

  setTimeout("animateFade(" + curTick

      + ",'" + status + "')", 33);

}

Enne87
09/09/2008 - 13:58

I would like to use an imagebutton instead of a normal button, but when I change attribute "type=input" to "type=image", the rectangle disappears and immediately appears.

Stikiflem
09/11/2008 - 03:57

hey guys, i tweaked the fading a bit. It will start Fading In, then Fading Out - the opposite. I know it was already explained at the top but my tiny little brain got confused and i wasted some time on it. I won't post it here because its a pain in the as* with the quotes and other characters. Here's the link instead. (hope the author dont mind).

Thanks again for all the help! The codes above really helped me :)

Ghprod
09/24/2008 - 14:13

great!

so simple but powerful ... :)

Thnx

Doez
11/08/2008 - 08:27

thank's

Tabrizz
02/11/2009 - 22:12

Do you know how to use multiple DIV ID's with different buttons/links? For example, I want to use 2 separate links that call this function, and when I click one link it makes one DIV transparent (invisible) before making the second opaque (visible).

Reda
03/02/2009 - 07:40

Thank you so much for this amazing and useful script!
I have just one question please:
i have an invisible item (image...)
and i want to apply the fade in when i make it visible...
i'm not good in JS, how can i do that?
Thanks a lot

Kempison
03/04/2009 - 17:44

Hi. What attribute can I change/add to delay the initial fade in? I want another action to finish before this one commences. Thanks in advance for any help given.

Anonymous
04/12/2009 - 02:47

Anonymous
04/16/2009 - 09:52

Can someone post the code to fadeout also. The current code just fades in but not fadeout.

Thanks

James
06/08/2009 - 09:39

Great code!
I trying to modify the code so it starts 0% then fades in to 100%

Can someone assist me please.

James
06/08/2009 - 09:56

solved it,
Thanks anyway

again great code!

Magnus J
06/23/2009 - 06:03

Hi, great code!!!
Like "Tabrizz" said:
How can you get this to hide the currently visible layer when opening a new one? That would be really useful.

Anyone?

Tory
06/24/2009 - 23:51

HI nice script man! However, I am wondering how I can customize this like for example I have 3 hidden div's with contents and each has it's own link for toggling it's visibility, so clicking Link1 for example shows Div1 but hides Div2 and 3. Then clicking Link2 show Div2 but hides Div1 and Div3 so on. Of course the default visible is Div1 which the hiding and the showing is controlled by the fading script you have above...

I think this would be a nice application to it, appearing like a pseudo-AJAXy feel to content control...

earlt777@hotmail.com
08/15/2009 - 00:23

Thank you so much for this code. I would have been lost as to where to even start to accomplish this.

I made a few minor tweeks to get it to have independent fade in / fade out with seperate fade values and time delay.

If you find bugs or improvements, please let me know.

Earl

Here is the Code:

function fadeX(objToFadeID, IsFadeIn, timeToFade, delay)
{
//objToFadeID - Object ID of the Div or object you want to fade
//IsFadeIn - Is this a fade in (vs fade out) 1 = true, 0 = false
//timeToFade - Time in ms to fade the object
//delay - Time in ms to delay the fade

var objToFade = document.getElementById(objToFadeID);
if(objToFade == null)
return;

var fadeXFactor = IsFadeIn==1?1:-1; // used to reverse values for fade in vs out

if ((timeToFade==0)&&(delay==0))
{
//if this is a simple instant popup, then make the settings are return
objToFade.style.opacity = 1*IsFadeIn;
objToFade.style.filter = 'alpha(opacity = ' + 100*IsFadeIn + ')';
objToFade.fadeState=2*fadeXFactor;
return;
}

if (delay == null)
delay = 0;

if (IsFadeIn)
objToFade.OriginalFadeInTime = timeToFade;
else
objToFade.OriginalFadeOutTime = timeToFade;

if(objToFade.fadeState != null)
{

if ((objToFade.fadeState==1*fadeXFactor)||(objToFade.fadeState==2*fadeXFactor)||(objToFade.fadeState==3*fadeXFactor))
{
return; //Current fade is in same direction or already there so we are OK;
}
else if (objToFade.fadeState==-1*fadeXFactor)
{
//reverse the time and the fade direction and let it continue
objToFade.fadeState = 1*fadeXFactor;
objToFade.timeToFade = timeToFade;
if (IsFadeIn)
{
objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
}
else
{
objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
}

return;
}
else if (objToFade.fadeState==-3*fadeXFactor)
{
//object is in hold status but directoin needs to be reversed and use the passed in time value
objToFade.fadeState=3*fadeXFactor;
objToFade.timeToFade = timeToFade;
if (IsFadeIn)
{
objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
}
else
{
objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
}
return;
}
}

//if we got this far, then the object is in the fully opposite state
objToFade.timeToFade = timeToFade;
objToFade.fadeTimeLeft = timeToFade;
objToFade.fadeState = 3*fadeXFactor;
var now = new Date();
now.setMilliseconds(now.getMilliseconds() + delay);
setTimeout("animateFade(" + now.getTime() + ",'" + objToFadeID + "')", 10 + delay);
}

function animateFade(lastTick, elementID)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(elementID);
if (element.fadeState==3) element.fadeState=1;
if (element.fadeState==-3) element.fadeState=-1;

if(element.fadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.fadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = ' + (element.fadeState == 1 ? '100' : '0') + ')';
element.fadeState = element.fadeState == 1 ? 2 : -2;
return;
}

element.fadeTimeLeft -= elapsedTicks;
var newOpVal = element.fadeTimeLeft/element.timeToFade;
if(element.fadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

setTimeout("animateFade(" + curTick + ",'" + elementID + "')", 10);
}

This is a test

earlt777@hotmail.com
08/15/2009 - 00:28

And here is the HTML for the javascript code above:

darkRoom
12/29/2009 - 14:39

This is a great site I spent day's looking all over for this script and the edit(from Shaw) without success just a bunch of nonsense(although it did help my skills being new to JS) Thanks I'll be back

uiman
03/07/2010 - 23:27

Thanks for the code, really liked the way you resolve it. I'm going to check the rest of the site...

BTW You should check the 'anti-SPAM' on Chrome, I think there something wrong...

vio
03/09/2010 - 08:56

Thanks for that nice code!
I extended the code to specify min. and max. opacities and made it more compact by merging the two functions 'fade' and 'animateFade' to just one function again called 'fade'! Apart from that it behaves like the original code!

fadeTime = 500.0;

fadeMin = 0.0;

fadeMax = 1.0;

function fade(id, lastTick) {

        var tick = new Date().getTime();

        var element = document.getElementById(id);

        if (element.fadeState) {

                if (lastTick)

                        element.fadeTime += tick-lastTick;

                else {

                        element.fadeState = element.fadeState == 1 ? -1 : 1;

                        element.fadeTime = fadeTime-element.fadeTime;

                        return;

                }

        }

        else {

                element.fadeState = element.style.opacity == fadeMax ? -1 : 1;

                element.fadeTime = 0.0;

        }

        var opacity = element.fadeTime/fadeTime;

        if (element.fadeTime >= fadeTime)

                opacity = 1.0;

        if (element.fadeState == -1)

                opacity = 1.0-opacity;

        opacity = (fadeMax-fadeMin)*opacity+fadeMin;

        element.style.opacity = opacity;

        element.style.filter = 'alpha(opacity='+opacity*100+')';// IE

        if (element.fadeTime >= fadeTime)

                element.fadeState = null;

        else

                setTimeout("fade('"+id+"',"+tick+")", 33);

}

You have to call the function with just one argument, for example:

<img id="hover" src=".." style=".." onMouseOver="fade(this.id);" onMouseOut="fade(this.id);">

PKo
03/15/2010 - 01:14

Hi, there is nice code on this site.

I used the variant by earlt777@hotmail.com to install it with the 'onload' handler of the body tag.

This worked fine with Firefox/Opera, but it didn't work with IE8.

If I want to fade into a page with IE8, only the following header tags will have success:

Are there experiences to use some variant of the fading script here with body/onload on IE8?

PKo
03/15/2010 - 01:28

In my last post I forgot the IE8 specific code, here it is:

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=4)">

<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=3)">