Matt Kirman

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.


Click me!

Download rf.Highlight