Documentation

$(selector).glow(color, duration, steps);

• color can be a color name, a hex color (#ABC or #FFEEEE), or rgb(12,42,43)
• duration is the time in milliseconds to glow (default is 1000, or 1 second)
• steps is the number of color changes to make in the glow effect. Default is 50.

Pass null or false for any value which you want to use the default. All arguments are optional.

The default color is #FFFF99, a light yellow.

Why use this when effects.highlight.js does the same thing?

Well, it's lighter weight than the whole UI library, and the $.animate interpolation doesn't seem to work correctly with non-white background colors.

So I wrote this, it was quick and dirty, and it understands all of the colors out there, has similar options, and is tiny.

Releases

• September 27th, 2009
  • Fixed issues with Opera (Thanks, Simeon Hvarchilkov)
  • Added rgba(0,0,0,0) parsing for Safari
  • Transparent colors rgba(0,0,0,0) are ignored now as well
  • Fixed demo to support click
  • Tagged glowed items to avoid glowing the same item at the same time
• March 25th, 2009 — Initial release

Download

• Download jQuery Glow Plugin (Minified)
• Download jQuery Glow Plugin (Uncompressed)

Source code

Hit refresh to watch the demo again.

	$(document).ready(function() {
		$('blockquote').glow();
		setTimeout(function() { $('.sub blockquote').glow('red', 7000); }, 5000);
		setTimeout(function() { $('.background-test blockquote').glow('orange'); }, 10000);
		setTimeout(function() { $('h1').glow('purple', null, 100); }, 15000);
		setTimeout(function() { $('pre').glow('rgb(0,80,0)', null, 3); }, 15000);
		$('blockquote').click(function (x) { $(x.currentTarget).glow('magenta', 500, 100); });
		$('.background-test').click(function (x) { $(x.currentTarget).glow('grey', 500, 100); });
	});

Contact

jQuery Glow demo

Here's a message you may want people to pay attention to. Click any of these boxes to glow magenta.

Div and then a blockquote

Reverse color test 2

Another color, entirely.