Came across this small article by Paul Lewis reminded me of the importance of proper animations in UI. It's almost like directing a movie, every frame has to be put there thoughtfully. Thoughtlessly throwing a bunch of random transitions into your page or app would likely end up irritating the user if he uses the interface for at least a minute.
But without further babbling on the matter, here are some basic tips:
- Do ease. Make sure you use a non-linear easing function at all. In real world, there's almost never such thing as "linear" movement. Even your Roomba iRobot speeds up and slows down on its way around your house!
- Ease out. When responding to user action, in most cases you want to ease out. That way our user gets served the requested information fast, without that "slowing" in the beginning
- "Expand fast, contract slower", as Paul puts it. More generally, this means making opening actions faster than closing actions, precisely for the reason given previously: when the user requests information, he wants it to appear ASAP (and often zero animation is fine too!), however he's not focused on the task anymore, we can add a little bit of extra smoothness when closing that lightbox or collapsing that menu
Experiment. Spend time on that stuff. Don't just leave the parameters at their default and move on, play with animation durations and easing functions and see if you can fine-tune user interaction here. Speaking of easing functions, jQuery has a number of predefined variants. While you typically don't want to use something like bounce easing for a site's main menu, such funky effects may find a use if they're not frequent. Just keep in mind that's possible with custom easing functions.
BONUS TIP: No animation is better than one that stresses out.
For more details and illustrations see Paul's article: http://aerotwist.com/tutorials/protip-choose-your-ease/