Search code examples
jquerytransitiontabbed

Smooth transition for lower divs when showing more content higher up

sorry for the title, hard to explain!

I have a gallery section for a website i'm building and each section has a different amount of images inside - when cycling through these (using jquery ui tabs) i would like the content below to smoothly scroll up/down depending on the content that is there.

example: http://www.maxhenchman.co.uk/oh/

If you click on the Landscapes tab, you will see the Contact section jump down abruptly to make room for the additional photos, could someone suggest a plugin/script that would make this act more smoothly with a transition of some kind?

EDIT:

$(function() {
   $('#tabs').tabs({
    show: { effect: "fade", duration: 500 },
    hide: { effect: "fade", duration: 500 }
});
});

Thanks a lot!

Max

Solution

  • Are you looking for this behavior?

    $( "#tabs" ).tabs({
 show: { effect: "slideDown", duration: 500 },
    hide: { effect: "slideUp", duration: 500 }
});

    DEMO