jquery slideUp() and slideDown() problems

Question

I am inexperienced with jquery, and I'm having some trouble with the slideUp() and slideDown() animations.

I have been working on a vCard design similar to Tim Van Damme's site. here is the link to the design: link. When you click on the portfolio or work button, the text or image appears first before the div finishes sliding down. I would like the div to slide down first and then show the text... This currently works when you click on the contact button or the home button on the top navigation bar, but does not work for the portfolio button and the work button.

I have a hunch that this may not even be a jQuery problem, and that its just my bad css code, but I have skimmed through the css code, and changed things like z-index, but that hasnt worked.

Answer 1

You can use the callback function of slideDown

Something like

$("yourselector").slideDown("slow", function(){
    // your code to manipulate text and image
});

Answer 2

What you need to do is make the content fit into the box at all times, even as it is changing size. I tried adding overflow: hidden to the div with class panels in Firebug. It hid some of the stuff, but not the text on the network tab for some reason...