jQuery-UI Tabs - How to change effects?

Question

I'm looking to add a nicer effect to a jQuery Content slider which uses tabs.

At the moment it uses 'opacity' which is really ugly.

Here is my code;

 $('#featured').tabs({
                      fx:{
                          opacity: "toggle"
                         }
                     }).tabs('rotate', 5000, true);

Check out http://www.jsfiddle.net/cxNj8/4/

Is it possible to add a nicer fade like 'fade' in jQuery cycle?

(note: I've added the cycle library to the jsfiddle example)

Answer 1

$('#featured').tabs({
                      fx:{
                           height: "toggle",
                           opacity: 'toggle', 
                           duration: 600   
                         }
                     }).tabs('rotate', 5000, true);

Answer 2

jQuery UI tabs doesn't seem to support "crossfading", only "fade out" then "fade in" with a blank gap between them.

However, you might try the Flowplayer jQuery plugin which has an example of doing cross-fading tabs in a slideshow that is similar to your example: http://flowplayer.org/tools/tabs/slideshow.html