Various animations for jquery ui tabs

Question

I am using the jquery ui tabs widget. I did not use the jquery theme as I prefer to make my own css and stuff. This works for me, but I would like to have a different animation effect for the contents of the tab when I click on another tab. I want the new tab to appear on the left.

At the moment I have:

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

I know that the above code is just a slide, not a slide on the left, but it doesn't even make a slide! I uploaded the slide effects as part of my custom ui download. I do not know why it does not work! Is this some kind of css that I am missing ?! I dont know!!!

Answer 1

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

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

Answer 2

, , :

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

"width", jQuery width, , . .

"" "" "", :)

Answer 3

: http://www.eduteka.org/ajax/tabs3/

Answer 4

, 1.10 jquery ui, "", . jquery ui :

http://api.jqueryui.com/tabs/#option-show

$( ".selector" ).tabs({ show: { effect: "blind", duration: 800 } });