jQuery height animation jumps when animation is complete [duplicate]

Question

I have a set of buttons that, when clicked, the instructions on the page fade out and the desired content fades in. The div also expands using the jQuery .animate() function. When the div is finished expanding, the height jumps shorter. I made a jsFiddle but it works fine on there. So, it must have something to do with the rest of my content.

Here's the site

http://northviewhigh.com/index/fbla/1213/eb/styles.css - CSS File

[same as above, can't post more links]/eb/jquery/scripts.js jQuery File

And here's the code:

<div id="tixcontainer">

    <div class="tixinfo startinfo">
        Select a ticket type to begin ordering your graduation tickets. 
    </div>

    <div class="tixinfo hidden gradinfo">
        You selected "Graduate"
    </div>
</div>

#tixcontainer {
    width:100%;
    height:100px;
}

.tixinfo {
    position:absolute;
    top:629px;
}

.startinfo {
    height:100px;
}

.gradinfo {
    height:200px;
}

function expandTix(newHeight,cat) {
    $('.startinfo').fadeOut();
    $('#tixcontainer').animate({
        height: newHeight
    }, 'slow', function() {
        $('.'+cat+'info').fadeIn();
    });
}

$('.gradbutton').click(function() {
    dimAllBut('grad');
    expandTix(200,'grad');
});

Answer 1

This looks like the same issue:

jQuery animate()

and adding overflow:hidden to your #tixcontainer on the example page stops the jump.