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:
- Quickly fade out the #content_container,
- Do something to update the #content_container. Or whatever you want really.
- 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.
