JavaScript Color Fading Script

Ultimate JavaScript Slider and Scroller »

2
May

Posted by Michael in Design, JavaScript

This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs and more. You can target an elements background, border or text color.

Below is the command to call the function…

colorFade('divid','background','ece7b4','f9bcbc',25,30)

The first parameter is the id of the element you are targeting. The second is the property to fade which can be the background, border or text. The third is the hex value of the starting color. The third is the hex value to fade to. The fourth and fifth are both optional. The first is the the number of times to divide the color difference and the last is the transition speed.

This script has been tested working in IE6/IE7, Firefox, Opera and Safari. Please report all bugs to michael@leigeber.com.

Click here to view the demo.

Click here to download the script.

Update 5/5/2008 - I have tweaked a few things and integrated some performance improvements based on Nate’s suggestions.

5 Diggs

41 Responses

[...] Si queréis añadir un toque extra de estilo a vuestros sitios y mostrar una transición de color cuando el usuario pinche o pase sobre algún elemento de la página ahora podréis fácilmente con este script: Javascript color fading script [...]

Webmaster Libre | Transiciones de color con Javascript on 03 May 2008 at 5:23 am

Thanks! How would you make this work on page load? So that the color would fade as soon as the page loaded?

Zac on 03 May 2008 at 11:16 am

@Zac - Something like this should do the trick… you can view it at http://sandbox.leigeber.com/fader/fader3.html.

Michael on 03 May 2008 at 11:49 am

Thats a very nifty trick, its actually smoother then jquery. Nice work.

Web Development Blog on 04 May 2008 at 12:52 am

Very wordpreful work!!

Mondo Libero on 04 May 2008 at 1:48 am

[...] JavaScript Color Fading Script Related StuffCustom JavaScript Dialog Boxes60 More AJAX- and Javascript Solutions For Professional CodingdfFlexiGrid - Liquid Javascript Grid LayoutMac OS X-Style Dock Menu in Javascriptjavascript carouselsSwedish fika » Creating a fading headerGalleria - a Javascript Image GalleryHow to highlight search results with JavaScript | Eric Wendelin [...]

» JavaScript Color Fading Script Webcreatives on 04 May 2008 at 6:49 am

[...] lightweight JavaScript Color Fading Script. Add fading effects to tables, divs and more. You can target an elements background, border or text [...]

JavaScript Color Fading Script on 04 May 2008 at 2:40 pm

How can I do an automatic fade to two colors, I mean the div changes from black border to red?, and when the div changes to red, then it change again to black. Thanks

Mario on 04 May 2008 at 7:49 pm

@Mario - You would need to extend the colorFade function to take a third hex color, pass that variable to the animateColor, and then after line 65 in the else statement call the colorFade function again. Shoot me an email at michael@leigeber.com if you need any help figuring it out.

Michael on 04 May 2008 at 8:01 pm

very sweet! I was just looking for something like this. thanks!!

Shanna on 04 May 2008 at 8:38 pm

[...] JavaScript Color Fading Script. Este ligero script permite realizar transiciones de color. Esto nos permite añadir efectos de fundido a tablas, divs, etc. Podemos actuar sobre el fondo, el borde o el color del texto del elemento en cuestión. [...]

Intenta » Blog Archive » Links 05-05-2008 on 05 May 2008 at 2:30 am

Nice trick, also have a look at colorBlend plugin for jQuery which is really powerfull.

http://www.happinessinmycheeks.com/colorBlend/

Zero1infintiy on 05 May 2008 at 5:56 am

This works great, but I looked over the code and have a few suggestions to tighten it. What you have now is fine… just pointing out a couple of things I’ve picked up over the last few months, writing this kind of stuff.

eval() slows things down, and can be avoided in pretty much any situation.

You can get rid of your decConv function. Just replace it with:
parseInt(”[2 digit hex]“, 16);
//parseInt’s second parameter is the base, and default to base 8 if the first character is a “0″

This should also make your colorConv function much simpler. You could rewrite it as:
function colorConv(color) {
var rgb = [
parseInt(color.substring(0,2), 16),
parseInt(color.substring(2,4), 16),
parseInt(color.substring(4,6), 16)
];
return rgb;
}

setInterval can take an anonymous function instead of the eval’d string you currently pass, which also makes it easier to read/maintain:
target.timer = setInterval( function() {animateColor(id,element,steps,er,eg,eb,rint,gint,bint);}, speed);

Another little trick is to define undefined variables with ||
You could use the following:
steps = steps || 20;
speed = speed || 20;

You could also scope all functions inside of the colorFade function. This will make it so you only introduce 1 variable into the global namespace.

Nate on 05 May 2008 at 9:00 am

@Nate - Some really good suggestions there. I will look through my code and work in these and a couple other little things I noticed yesterday. Thanks for the tips.

Michael on 05 May 2008 at 9:15 am

[...] JavaScript Color Fading Script [...]

Max Design - standards based web design, development and training » Some links for light reading (6/5/08) on 05 May 2008 at 2:59 pm

[...] Источник: Блог Майкла Лейгебера. [...]

Эффект затухания в Javascript | АяксЛайн.ру on 05 May 2008 at 5:02 pm

[...] Read More [...]

JavaScript Color Fading Script « Designerz Web on 06 May 2008 at 12:50 pm

PERFECT TIMING! I’d visualized a fade-in a couple weeks ago. You posted this code on May 2 and modified on May 5. And I went lookin for code samples today, May 6. Lucky me.

I’ve applied your code via <body onload= … and it’s almost exactly what I need. The only enhancement I’d suggest is a “delay” parameter before the fader starts.

Thanks,
Richard

RP on 06 May 2008 at 2:25 pm

Is there anyway of putting the onmouseover and onmouseout in a javascript in the hedear, so you are left with a clean div?

<head>
<some java script that applies for someID>
</head>
<div id=”someID” class=”darkgrey”>Third Div</div>

Would be really grateful if you can mail me the solution, if there is one.

thanx alot
hamochi@gmail.com

hamochi on 06 May 2008 at 7:07 pm

@hamochi - Absolutely, I definitely recommend adding events dynamically. I wrote an article recently pointing that out. I would recommend not adding the JavaScript in the header but rather keep it all external. Plus if you try adding these events in the header you will get an error. You could add the events before the </body> if you have to must. You can add mouse events like the following…

document.getElementById(’id’).onmouseover = function() { whatever };
document.getElementById(’id’).onmouseout = function() { whatever };

Michael on 06 May 2008 at 8:39 pm

[...] JavaScript Color Fading Script- This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs [...]

Exceptional Ajax/javascript Techniques (Recently Created) on 12 May 2008 at 12:04 am

[...] JavaScript Color Fading Script- This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs and more. You can target an elements background, border or text color. [...]

30 recently created exceptional ajax javascript techniques on 14 May 2008 at 8:08 am

Hey, awesome script! I am loving it!
One thing I am wondering about, I have the script tied in with AJAX and the DIV fades when updated, which works great. But after the initial fade, mouseover, mouseout, and the update fade that originally worked, does not.

Is there a “reset” that I am missing? The update fade is called at page load, and if it happens, the fade no longer works.

Again, awesome work.

Curt on 30 May 2008 at 12:52 pm

@Curt - Shoot me an email and I will take a look. Want to make sure I am following you correctly.

Michael on 30 May 2008 at 12:58 pm

Heya, have a look at this script, it combines changing colours and sliding at the same time. Think it might be somthing similar to this: http://www.whadiz.com/c/whatis.aspx/programming/javascript/javascript_slide_fade_marquee

Ryan on 05 Jun 2008 at 2:25 pm

[...] JavaScript Color Fading Script - un efect vizual plăcut de "colorare" a unor div-uri. [...]

Leigeber: Web Development Blog | CNET.ro on 06 Jun 2008 at 12:31 pm

I noticed that if you try to call this via a function or some other automatic (read: no human interaction required) it doesn’t do any fades past the first one. However, if you call it with an event (like onmouseover) then it works flawlessly. Go figure.

Marcus on 09 Jun 2008 at 5:55 pm

OK, my fix for this was to store the timer and r,g,b in an object instead of directly on the element. Worked like a charm

Marcus on 09 Jun 2008 at 6:27 pm

[...] clone- A jQuery lightbox clone with tons of features you would love to have. 演示下载 24) JavaScript Color Fading Script- This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs [...]

StarryNight » Blog Archive » 最新ajax特效30则 on 11 Jun 2008 at 7:30 pm

This is by far one of the cleanest and browser friendly scripts I have come across. If you had a donation option on this site, I’d gladly contribute towards your work.

TGLS on 12 Jun 2008 at 8:14 am

@TGLS - I really appreciate the offer, I may get around to adding a donation button sometime but in the meantime your appreciation means just as much to me. Thank you.

Michael on 12 Jun 2008 at 8:22 am

Is there any way I can use it for li tag?
I think this will be good for menu item which uses li tag.

Thanks another great script.

elvis on 16 Jun 2008 at 2:38 am

@elvis - You should be able to use it for list elements as-is. If you are having a problem for some reason shoot me a message.

Michael on 16 Jun 2008 at 10:33 am

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

mcd on 19 Jun 2008 at 11:47 am

@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.

Michael on 19 Jun 2008 at 12:34 pm

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?

Kurt on 22 Jun 2008 at 12:57 pm

@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.

Michael on 22 Jun 2008 at 1:20 pm

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.

Parker on 25 Jun 2008 at 7:47 pm

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

Palle Nielsen on 30 Jun 2008 at 10:50 am