[Update] I’ve recently changed my JavaScript framework to MooTools, hence the rf.Highlight demo isn’t working properly. The plugin itself hasn’t actually changed so should still work perfectly fine on your own site.
I needed a simple implementation of the famous Yellow Fade Technique (YFT) for a new product that we are developing at Redflex. We struggled to find a YFT jQuery plugin that was simple to use, had a small file size and supported chaining. I give you rf.Highlight.
To highlight an element simply call:
$('#element').highlight();
And, of course, it is also customisable (default values are shown):
$('#element').highlight({ color: [255, 255, 187], // rgb color of the fade (yep, it doesn't have to be yellow!) duration: 400, // duration of the fade in milliseconds quality: 20, // quality of the fade (the higher the number the better) wait: 3000 // initial pause before the element starts to fade });
Because it relies on RGBa browser support for the fade it is only compatible with Firefox 3, Safari 3.2+ and Google Chrome. On unsupported browsers you will get the yellow highlight to transparency but without the fancy fading transition.
Demo
$('#highlight_demo').click(function(e){ $(this).highlight(); });
Download rf.Highlight
- Minified (0.9KB Gzipped)
- Packed (1.2KB Gzipped)
- Development version (1.0KB Gzipped)
Comments