jQuery UI Tabs - Available fx options

Question

I haven't been able to find any real documentation on this, so I'm wondering if anyone knows all of the available fx options for jQuery UI Tabs?

The only ones I've seen so far are:

1. opacity: "toggle";
2. height: "toggle";

A crossfade would be nice, though I don't think I've seen this done with jQuery UI Tabs yet.

Also, I can't even find how to specify the fx speed, though the documentation mentions I should be able to change it.

Solution 1

Basically the fx option is used to call animate, you can specify a single option or two in an array, that will be used to do the show and hide effects:

 $('#tabs').tabs({ fx: [{opacity:'toggle', duration:'normal'},   // hide option
                        {opacity:'toggle', duration:'fast'}] }); // show option

The fx speed can be specified using a duration member on the option object.

Basically you can do the same transformations that you can with animate.

Give a look to the ui.tabs.js file, on the line 250 here, to understand better how the animations are setup.

Solution 2

opacity: "toggle";
height: "toggle";
width: "toggle";