I didn't mean that it needed comments, although that generally never hurts when sharing scripts. I meant that I didn't want to get too distracted from my own version to comment in detail on yours. I do have a few things to mention though about it and about this fading business in general.
I cannot see anywhere that you have taken into account that many older browsers, like FF 1.0.1 I believe, and NS 7 for sure (and perhaps later NS) cannot transition smoothly from any opacity less than 1 to 1 without a disconcerting flash. That is why there is so much mention of .99 in my code. It is unfortunate that there is no object test to determine (as far as I know) which opacity/-moz-opacity based browsers will feature this defect, so all are given the .99 treatment in my code. Opera 9.0 (first Opera browser with opacity support) had this problem too, but the recent/current sub-version I now use does not.
The next thing is about IE 7 and filters. There is no way that adding a filter to the html element for testing would be a good idea. It will prevent all text on the page from rendering in ClearType mode, making it appear faint and scraggly. I mentioned this earlier, but am not sure it sunk in. In IE 7, any element with a filter or that has a parent with a filter will exhibit this unsightly rendering of text, regardless of whether or not said element or parent has background. Horrible, but true to the best of my knowledge. In IE 6 and earlier, this could be avoided simply by having background - as you mentioned, but this no longer appears to work.
Now, as to readability/simplicity of coding, I would direct you, or anyone to this post:
http://www.dynamicdrive.com/forums/showpost.php?p=99490&postcount=2
where the germ for my current project came up. The code featured there is so simple that many more folks will be able to grasp it as compared to any of the code put forth so far in this thread. However, it will only work well in the more recent opacity/alpha opacity supporting browsers.
I believe I am now about finished with my code's evolution. The most recent version should work well in any browser that supports any type of style or filter opacity and has been tested and proven to in many that do, as well as to degrade gracefully in several that do not. I took your advice on not assigning script properties to the element and have worked out my way of not requiring any style to be set. Elements now need be configured like so:
var faders=[];
//preset each image's initial opacity (0 to 100):
faders[0]=['mona', 50];
faders[1]=['arch', 0];
by their id. And the timeout caching is handled this way:
fade.timer=function(el, to){
for (var i = 0; i < faders.length; i++)
if (el.id==faders[0]){
if(arguments[1])
faders[i][3]=to;
else if(faders[i][3])
clearTimeout(faders[i][3]);
}
}
with this syntax:
fade.timer([I]el);
clearing any timeout that has been previously cached for that element, and this type syntax:
fade.timer(el, setTimeout(function(){fade(el, way, op, opinc, speed)}, speed));
setting and caching a timeout for an element without attaching any property to it - where el is the element passed along in the main script. and faders[i][3] is an extension of the dimension of the array that already has the element's id as its first [0] value.
Position [2] in the dimension for a given element is used to register whether or not the element's initial 'in script' opacity has been set yet or not, thus eliminating the only other property I was attaching to the element (el.yet). This is carried out in another function:
fade.preset=function(el){
for (var i = 0; i < faders.length; i++)
if (el.id==faders[i][0]&&!faders[i][2]){
if(arguments[1])
faders[i][2]=1;
else
return faders[i][1];
}
return null;
}
I intend to make the full code available in the submissions section soon.
Added Later:
The code is now up in the submissions section. Also, I realized that since I was now requiring that the image to be faded have an id, I could retrieve it and use it for timing and other unique properties, examples:
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
clearTimeout(fade.[id+'timer']);
fade[id+'yet']=true;
Here is the link to the submission:
http://www.dynamicdrive.com/forums/showthread.php?t=22534