Jquery tabs transition between tall and short tab

I wrote this quick jquery tab code that also updates the hash location (appended with '_tab' prevent browser jump onload).

My question is how would I make the transition between the different height tabs nicer without stacking them on top of each other with position absolute because I want all the tabs to be visible with JS turned off.

HTML

<ul class="tabNavigation">
    <li class="tab1"><a href="#tab1">Tab 1</a></li>
    <li class="tab2"><a href="#tab2">Tab 2</a></li>
</ul>

<div class="tabs">  
    <div id="tab1" style="height: 400px">
        tab1
    </div>

    <div id="tab2" style="height: 4000px">
        tab2
    </div>                          
</div>

JS

// Tabs with hash change
    var tabContainers = $('div.tabs > div');
    var hash = window.location.hash.replace("_tab","");

// On page load check for hash else show :first
if($(hash).length != 0) {
    tabContainers.hide();
    $(hash).show();
    $('ul.tabNavigation li.'+hash.replace(/#/,'')+' a').addClass('selected');
} else {
    tabContainers.hide().filter('div:first').show();
    $('ul.tabNavigation li:eq(0) a').addClass('selected');
}

$('ul.tabNavigation a').click(function(e开发者_JAVA百科) {
    tabContainers.slideUp("slow");
    tabContainers.filter(this.hash).slideDown("fast"); 

    $('ul.tabNavigation a').removeClass('selected');
    $(this).addClass('selected');

    // Prefix with _tab to prevent browser jump on page load.
    window.location.hash = this.hash+'_tab';

    e.preventDefault();
});

why don't you just apply a class to the tabs div with javascript. The set your position absolute styles dependant in that class?