jQuery ui tabs animate change in height between tabs

Question

I'm trying to create a simple tabbed interface using the tabs plugin from the jQuery ui library. I have the tabs working fine but I need the change in height when the user clicks to a new tab to ease up or down. Something just like this but using jQuery ui tabs plugin.

So far I'm using the basic script:

$(document).ready(function() {
$("#tabs").tabs();
});

Answer 1

try this:

$(document).ready(function() {
    $("#tabs").tabs({ fx: { opacity: 'toggle', duration: 1000 } });
});

Answer 2

I think you can use some effects in jquery ui, $( ".selector" ).tabs({ hide: { effect: "explode", duration: 1000 } });

Refer this, http://api.jqueryui.com/tabs/