Cross browser image fade out script

Any suggestions for a widely compatible fade out script that will fade an image over a set time?

Thank you,

Fritz the Blank
LVL 46
fritz_the_blankAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

a1programmerCommented:
fritz_the_blankAuthor Commented:
Thank you for the post. I was hoping that someone had one that they were currently using so that I know that it is tested, reliable, cross browser, and so forth.

I found dozens via google but have no idea which one to trust.

FtB
SteffestCommented:
Hi,
A few months back I faced the same problem.
I found out that image transparency (or opacity) is only supported in IE, Mozilla,  Firefox and Safari. There's no way you can set image transparency in Opera for example ... (besides using a defferent PNG image for each step)

So I concluded to use a flash movie to display the image: Very easy and by far the most compatible with all browsers ....

If you want dynamic control over image transparency, my advice is to use flash.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

a1programmerCommented:
Yeah, I realized what you meant after I noticed your name. :)
fritz_the_blankAuthor Commented:
Given the traffic in this site, I was hoping to be flooded with suggestions!

Steffest--did you find a good one that worked with most browsers?

FtB
SteffestCommented:
Hi,
If flash is not an option, I use something like this:

function Fade(objID,CurrentAlpha,TargetAlpha,steps){

            var obj = document.getElementById(objID);
            
            CurrentAlpha = parseInt(CurrentAlpha);
            if (isNaN(CurrentAlpha)){
                  CurrentAlpha = parseInt(obj.style.opacity*100);
                  if (isNaN(CurrentAlpha))CurrentAlpha=100;
            }
            
            var DeltaAlpha=parseInt((CurrentAlpha-TargetAlpha)/steps);
            var NewAlpha = CurrentAlpha - DeltaAlpha;
            
            obj.style.opacity = (NewAlpha / 100);
            obj.style.MozOpacity = obj.style.opacity;
            obj.style.filter = 'alpha(opacity='+NewAlpha+')';
            
            if (steps>1){
                  setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50);
            }
}


where
objID is the ID of the object you want to fade
TargetAlpha is the % of opacity you want as result
steps is the amount of steps of the fade in 1/20 seconds (this controls the speed of the fade)

this will fade in or out depending on the value of TargetAlpha

The reason why CurrentAlpha is also passed as parameter is that Mozilla and Firefox sometimes read out an incorrect value of obj.style.opacity when called every 50 miliseconds, so passing the CurrentAlpha param is much safer.

Example can be found at http://www.steffest.com/fadeimage.htm

Works in every browser that supports opacity (IE4+, mozilla, firefox, safari, Konqueror)

Hope this helps!
Steffest

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
fritz_the_blankAuthor Commented:
Thanks to all for posting.

ftB
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.