O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required