jQuery Quickie: User Feedback with Fade Out/In

Here’s a little jQuery idiom I’ve come to use on a few web design projects that I thought might be nice to share.  Let’s say you want to update a region of the page or widget based on some user action.  For example, you might be building a screen with a list of orders on one side, and an details panel on another.  Clicking on one of the orders replaces the data that shows up in the details panel.

I use this snippet when I want to visually reinforce an on-screen change that happens when the user takes some action.

$('#link').click(function(
  $('#content_container').fadeOut("fast",function() {
     updateContainer();
     //other code here
   }).fadeIn();
);

(view as Gist)

Pretty simple jQuery, really.  When the user clicks on the link, we want to swap out the information in the content_container with the new data.  This simply chains together a nice set of animations to:

  1. Quickly fade out the #content_container,
  2. Do something to update the #content_container.  Or whatever you want really.
  3. Fade in the #content_container after all the updates are complete

I personally like the fast fade out, normal speed fade in.  I feel like it gives the user a nice visual indication that something in this area changed, without drawing out the animation or drawing attention to the fading effect itself.

On a side note, this builds on some things I learned from Bill Scott at this year’s Web App Master’s Tour.  He presented a nice framework for thinking about all the small ways designers can provide useful user feedback without drawing attention to the animation or UI itself.

Advertisements