How to implement sliding effect on jQueryUI Tabs

I have jQueryUI tabs set to fade between tabs. But I would like to apply other effects, perhaps sliding. But since I am a newbie to jQuery I cannot seem to get the syntax ri开发者_StackOverflowght.

This is what works right now:

$( "#tabs" ).tabs({ fx: { opacity: 'toggle', duration:500} });

This however does NOT work:

$( "#tabs" ).tabs({ fx: { slide: 'toggle',duration:500} });

or this:

$( "#tabs" ).tabs({ fx: { slide: 'toggle',direction:'down',duration:500} });

I have also tried slideUp, slideDown, even explode..nothing other than opacity seems to work.

try this one

$("#tabs").tabs({ fx: { height: 'toggle', duration: 1000 } });

Have you tried this?

$("#tabs").tabs({fx:{height: "toggle"}}).tabs("slideDown", 500);