jQuery UI: Bouncing Tab Transitions

The tabs widget, from jQuery UI, lets the developer specify show and hide transitions independently from one another. That is, when the user transitions to another tab, by either clicking or interacting with the keyboard, the hide effect will be applied to the current tab panel. Next, the show effect is applied to the new panel. Note, we're talking about the panel here, not the clickable tab portion here — two distinct elements. However, it's possible to animate these as well when activated.

For example, supplying the following callback function to the beforeActivate event will allow us to make the new tab bounce when activated.

$( "#tabs" ).tabs({
    beforeActivate: function( e, ui ) {
        $( ui.newTab ).effect( "bounce", 275 );    
    }
});