Alternate methods for highlighting asynchronous page changes with jQuery

Question

Some jQuery use cases call for letting the user know (usually through some animation) that something on the page has changed. For example, the user enters a format string in a text box (with codes for different tokens that can be replaced), then 1 second after the user is done typing, a different area of the page updates a live preview of what the text will look like with all the tokens replaced.

The jQuery UI "Highlight" effect is one example of this - the affected region briefly flashes yellow before fading back to the original background color.

What are some other pre-built jQuery effects that could be used for this task? Please post each link as a separate answer and then upvote your favorites. Then we'll all be ready with alternatives when a manager says "I like the concept but I don't like how it looks."

Answer 1

The yellow-fade effect is one of the most used effects in this kind of situation -- and people have probably started getting used to it.

Maybe it's not "cute" or anything, but if it's well accepted, you should probably go with it; it would make your application easier to understand, and that is definitely what should matter.

Here are a couple of links:

• Web Interface Design Tip: The Yellow Fade Technique
• It starts with a Yellow Fade: The need for a more comprehensive understanding of visual effects on the web

And it seems this is what jQuery's highlight is doing -- there is probably a good reason for that choice ;-)