Creating effects between tab transitions

The tabs widget lets the developer specify an effect to run when transitioning between tabs. Specifically, we're able to tell the tabs widget to run a specific effect when showing a tab, and another effect when hiding a tab. When the user clicks on a tab, both of these effects, if specified, are run. First the hide effect, followed by the show effect. Let's take a look at how we can combine these two tabs options to enhance the interactivity of the widget.

How to do it...

First, we'll create the necessary HTML structure we need to build our tabs widget. It should look something along the lines of what follows, producing three tabs:

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">
        <p>Tab 1 content...</p>...