Comments on: JavaScript Color Fading Script

By: roger

roger — Sat, 19 Jul 2008 12:17:14 +0000

he he i love the simplicity of this and playing around with it amazing how disappearing links can bring a smile to your face http://eti.me

By: roger

roger — Thu, 17 Jul 2008 14:34:23 +0000

thanks! small but cool implementation http://redseacheck.com

By: Palle Nielsen

Palle Nielsen — Mon, 30 Jun 2008 16:50:07 +0000

I had the same problem as a couple here where the fade only works the first time. (fixed)

Problem can be seen on the link posted by someone else earlier
http://sandbox.leigeber.com/fader/fader3.html
If you hit one of the DIV links it works, but if you hit the same link again the fade does not happen again, you have to reload the page.

Not knowing exactly why in the colorFade funtion there is a “if(!target.r)” I did a workaround. I added “target.r=0;” efter the else clause in animateColor function.

—–cut——
} else {
clearInterval(target.timer);
target.r=0;
color = ‘rgb(’ + er + ‘,’ + eg + ‘,’ + eb + ‘)’;
—–cut——

The thing is that the START color is not set for any additional hits to the funtion, so “startrgb” is undefined and the fade does not know what color to start with and ends up starting around the existing color (which is what the last fade ended on)

hope this helps someone

By: Parker

Parker — Thu, 26 Jun 2008 01:47:25 +0000

I appreciate the work you have done. It has helped me tremendously! I used this fade function with a transparent background function and it looks great. However, I’m having an issue with a bit of flicker and was curious what you thought it might be. Here is the site: http://www.yachtpartnership.org/yacht_preview.html
I’ve left all the JAVA and CSS in the HTML in order to show you.

By: Michael

Michael — Sun, 22 Jun 2008 19:20:08 +0000

@Kurt - That function was only in place to eliminate the RGB from being calculated again again if it already existed. It is no big deal to remove that statement, not a huge overhead.

By: Kurt

Kurt — Sun, 22 Jun 2008 18:57:28 +0000

Regarding Curt’s issue, the problem happens because of the conditional:

if(!target.r) { … }

If the function runs a second time on the same element, it finds the old “r” and it messes up. Commenting out the conditional (but not the code inside) resolves the issue.

Michael, what is the purpose of that line of code?

By: Michael

Michael — Thu, 19 Jun 2008 18:34:28 +0000

@mcd - Take a look at the demo page, I added a link at the bottom that demonstrates. Just call the function as it is used in the font color transition section except on an a tag and not a div.

By: mcd

mcd — Thu, 19 Jun 2008 17:47:24 +0000

This is great! It works great on regular text, but how do I get it to work on links? thanks!