jQuery UI Tabs - Available fx options

jquery jquery-ui tabs jquery-ui-tabs
Jason Berry picture Jason Berry · Aug 29, 2009 · Viewed 28.4k times · Source

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.

Answer

Christian C. Salvadó picture Christian C. Salvadó · Aug 29, 2009

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.

Related questions

jQuery UI Tabs - How to Get Currently Selected Tab Index

I know this specific question has been asked before, but I am not getting any results using the bind() event on the jQuery UI Tabs plugin. I just need the index of the newly selected tab to perform an action …

Read More
jQuery UI Tabs - Automatic Height

In previous versions of jQuery tabs there was an option to automatically set the height of the tab to that of the tallest tab in the group using: $('#container').tabs({ fxAutoHeight: true }); However this does not seem to work …

Read More
JQuery UI Tabs Causing Screen to "Jump"

I'm using the latest version of the jQuery UI tabs. I have tabs positioned toward the bottom of the page. Every time I click a tab, the screen jumps toward the top. How can I prevent this from happening? Please …

Read More