I'd like to say thanks to Andrew for this excellent tutorial.

A few comments follow on what I had to do in IE8 (Win Vista) to achieve a "smooth cycling" effect (fade in, pause, fade out) between two 24 bit .png files saved from PhotoShop with transparency. The graphic content of the .png files contain a central shape (a pyramid) and anti-aliased edges.

The two graphic elements are identical in size: what varies in the content is only the color information, and some trivial variations on anti-alisasing. Only one of the elements is being faded in or out, the other is always visible. Yes: the first image could have been part of a page background, but I wanted to work with it as a separate element.

In the CSS : I found it would only work if the CSS declaration of the .png being faded used : display:hidden

In the HTML : as in Andrew's examples, I declared the div element containing the picture to be faded as id = "fade1"

In the JavaScript :

1. both pictures pre-loaded using the standard technique from the late Paleolithic.

2. in OnWindowLoad :

a. call the first fade-in :

fade('fade1', 0, 100, 8000);

b. trigger the "cycle" function to occur nine seconds later :

theWindowInterval = window.setInterval("pyramidCycle()", 9000);

c. the "cycle" function :

function pyramidCycle()
{
// fade out
fade('fade1', 100, 0, 4000);

// call fade in after four seconds
setTimeout("fade('fade1', 0, 100, 4000)", 4000);
}

Hope this is useful information.

To do ? :

1. in Andrew's code the lookup of the element style is being done with every call to 'setOpacity which is being called in every iteration of the for loop in the function 'fade : set the element's style once in a variable in OnWindowLoad and eliminate multiple look-ups ?

2. improve the "cycle" function : add a parameter for "pause after completion" of each fade-in or out ?

best, BillWoo

Hi Andrew,

Many thanks for this well done article. I am playing with fading between two images in IE 8, and seem to have trouble getting a smooth cycle repeating: fade in, pause, fade out.

I've tried using setTimeInterval, etc. Seems like the fade in will occur smoothly, but the fade out seems to "snap" visually and not take as long as the fade in, no matter how I set the time intervals.

Perhaps an IE related thing ?

thanks, Billwoo

Hey Safi, thanks. Well, there are no getElementByClass, getElementByClassName or getElementsByClass. There is, however, a native getElementsByClassName() which is what jQuery for example uses when you use a selector such as $('.classname')..

This article is primarily intended to take a look at how a fade works, but it really doesn't even do a good job of that. I need to rewrite the actual fade functions so they're a bit more sophisticated and cpu friendly.

If you want to do fades and other neat things I recommend you run with a light weight version of jQuery. For the longest time I wrote all my JS from scratch and just recently I moved over to jQuery. In the upcoming ITNewb v2 I have less JS code which means smaller files to send clients and I have saved a tremendous amount of time working with JS compared to before.

I do think it is very important for us to understand JS and be able to write these things from scratch but once we're decent JS programmers using a framework is a really good idea.

If you really want to use this code or your own customized version of it, you'll have to use getElementsByClassName and then loop through the returned results appropriately just as jQuery would do.

Hope this helps :)

The problem is really just a mediocre approach on my part. There are too many iterations, running a bit too fast. As you've seen FF, Opera, Safari and so on pull it off, but IE wigs out. Nevertheless, if you watch your CPU level during a fade it will spike, which is a dead giveaway the approach has flaws.

Regarding opacity itself, this article was done well, but the fade technique needs to be improved. When I wrote a function to perform "smooth scrolls" it used step sizes, where it might jump 50px at a time. This fade technique is moving only a single percent each time the opacity changes, which is really silly on my part. Sure, it works tolerably, but I should have put more thought into it. At any rate, what the function really needs to do is have fewer executions, and each execution should change the opacity by probably 5%. I'm virtually certain IE would play nice with such a technique as well.

So I guess what I've really done is only offered "half help" regarding the fade thus far. Currently I'm on break (until Jan 1st), but once I get back to it I will rewrite the fades code and do it the way I should have done it to begin with.

Hopefully you can figure out how to write one yourself in the mean time. You may find the basic logic of the smooth scroll helpful to that end, at least as far as steps are concerned. I should also rename speed to interval so it's more clear what it does.

Cheers!

My pleasure, Steve.

You're right, the fade is a bit "laggy" in IE. For some reason, we can give FF and IE the same code and IE tends to be slow, and IE also has the issue of fuzzy text when we apply CSS opacity to certain elements.

Personally, I just avoid doing fades with IE, although I understand not everyone can go that route necessarily. The quickest bit of advice I can give you is to change the "1000" in the following line to say "300". You should get a decent result in both FF and IE this way.



Also, if your fade function doesn't have a duration parameter, you might as well just do:



Regarding duration, here is what my fade function looked like:



Regarding hiding the overlay divs with onload, what's coming to mind would be simply setting those classes with a display:none by default. You can adjust the display when needed to perform fades in the appropriate way. For what you're doing in that web page, I usually use the fadeIn and fadeOut functions because they also handle the display attribute for the target elements.

Hope this helps, and welcome to ITNewb :)