29

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.

Jason Berry
  • 2,469
  • 1
  • 17
  • 21

2 Answers2

41

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.

Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
  • can an animation be performed on the new html (not the currently displayed html)? – gkdm Feb 17 '10 at 13:43
  • this not proper cross-fade, because in cross-fade should not exist white between tabs change, always at least one of the tab content exist.please can you try again to anwser? (it possible to make div position absolute and fadeIn div1 and fadeout div2) – Ben Jan 09 '11 at 15:51
11
opacity: "toggle";
height: "toggle";
width: "toggle";
sth
  • 222,467
  • 53
  • 283
  • 367
Shuklendu
  • 111
  • 2