JQuery height animation jumps when animation is complete

Question

I have a set of buttons that when clicked on, the instructions on the page disappear and the desired content disappears. Div is also expanded with the jQuery.animate () function. When the div is finished, the jump height is shorter. I did jsFiddle, but it works fine. So this should have something to do with the rest of my content.

Here is the site

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

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

And here is 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 seems to be the same problem:

jQuery animate ()

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