jQuery Plugin: rf.Highlight
[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:
And, of course, it is also customisable (default values are shown):
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
$(this).highlight();
});
Download rf.Highlight
- Minified (0.9KB Gzipped)
- Packed (1.2KB Gzipped)
- Development version (1.0KB Gzipped)
- Comment help
- Get Livefyre