Question

My current script works fine, where then 3 menu buttons (menubtn1, menubtn2, menubtn3) make the container change height.
What I would like to do is have the script first animate the height to 0px, then animate to their respective heights.

That way I can replace the content of my container when the height=0px, and then whe it scales back up, the new content will be visible.

here is my script so far:

$(document).ready(function() {

    $(".menubtn1").click(function() {
        $(".container").stop().animate({
            height: '350px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });
    $(".menubtn2").click(function() {
        $(".container").stop().animate({
            height: '200px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });
    $(".menubtn3").click(function() {
        $(".container").stop().animate({
            height: '185px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });

});​

Answer 1

You could add your content in the ‘complete’ callback function, then animate it again:

$(".container").stop().animate({height:0},{queue:false, duration:600, easing: 'easeInOutQuint', complete: function(){
    $(this).html('your content').animate({height:350},600);
}})  

I updated your fiddle as well 🙂
http://jsfiddle.net/RpzpZ/3/

Here’s another variant. That’s probably how i would do it.
I added the content directly in the html.
I don’t know if you need the fixed heights of the different contents, here i used slideUp and Down so it will always adjust to the height of the content

http://jsfiddle.net/RpzpZ/5/