After some thinking about it I came to the conclusion that it's
currently not possible with the build-in animation support. Although
you can specify a custom animation
$('#tabs').tabs({ fx: { height: 'toggle' } });
and change it afterwards
$('#tabs').data('fx.ui-tabs', { height: 'toggle', opacity:
'toggle' });
you cannot specify a different animation for each tab and change that
dynamically on tab click. I think it could work if you do that
manually on tab click using the select callback:
var $tabs = $('#tabs').tabs().bind('select.ui-tabs', function(e, ui) {
// find the current selected panel
$('div.ui-tabs-panel:visible')
// ui.panel is the panel about to be shown
$(ui.panel)
// do some animation with these...
});
--Klaus
On Mar 2, 7:41 pm, Jeroen Coumans <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I have a page with tabs that all have different heights (they're
> images, actually). Switching them causes the text to reflow or 'jump',
> which isn't a nice effect. Is it possible to create a custom animation
> for tabs which animates from the current dimensions of a tab to the
> new dimensions?
>
> Thanks,
> Jeroen Coumans
