jQuery tabs jumps when clicked if below the fold

Question

I am creating tabs in jQuery but am having a bit of problem with jumps when the tabs are below the fold.

My Javascript is as follows:

$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show(); 
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeOut('slow',function(){
        $(this)
            .fadeIn(1300)
        });
    return false;
});

From doing a search, it seems the problem is due to the animation. If the animation is taken out, then there is no jump up when clicking a menu item below the fold.

Another fix is to put a fixed height in the CSS for the tabbed content but I need a variable height.

Anyone have any ideas? Thank you.