Different animations for Jquery ui tabs

Question

I'm using jquery ui tabs widget. I've not used a jquery theme as i prefer to do my own css and stuff. I've got it working, but what i'd like is to have a different animation effect for the tab content when a different tab is clicked. What i'd like is for the new tab content to slide in from the left.

At the moment i have:

$("#tabs").tabs({ fx: {slide: 'slow' } }); });

I know the code above is just slide and not slide left but it doesn't even do a slide! I have downloaded the slide effects as part of my custom ui download. I don't know why it isn't working! Is it some css that i'm lacking?! I don't know!!!

Answer 1

Not sure which version you use, but with 1.7.1 here is how to do it:

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

Answer 2

@Gyuri This slides the content in from the top.

Answer 3

i know this question is older than a year, but you can try this one:

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

if you use 'width' jQuery will create the effect using width property, hence a horizontal animation. you can also use height and width together for a diagonal effect.

also try 'hide' and 'show' keywords instead of 'toggle', they're cool too :)