jQueryのアニメーションの高さを段階的に

Question

私の現在のスクリプトはうまく動作し、3つのメニューボタン（menubtn1、menubtn2、menubtn3）がコンテナの高さを変更します。 私がしたいのは、まず高さを0pxにアニメートし、それぞれの高さにアニメートさせることです。

このようにして、高さ= 0pxのときに私のコンテナの内容を置き換えることができます。そして、それがスケールアップして新しい内容が表示されます。ここ

は、これまでのところ、私のスクリプトです：

$(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

あなたは再びそれをアニメーション、「完全」コールバック関数でコンテンツを追加することができます。私もあなたのフィドルを更新

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

:) http://jsfiddle.net/RpzpZ/3/

はここで別の変形です。それはおそらく私はそれをやるだろう。 コンテンツをhtmlに直接追加しました。それは常に、あなたはこのような何かを行うことができ、コンテンツ

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

Answer 2

はちょうどバックアップコンテナを開き、別のアニメーション関数を呼び出すあなたのアニメーションのコールにコールバック関数を追加することができます。

Answer 3

あなたはこのように、代わりに.animate()を使用しての.slideUp()と.slideDown()を使用することができます。

$(".container") 
    .slideUp("slow", function() { 
     $(this) 
      .html("<p>New content</p> and some other stuff") 
      .slideDown("slow"); 
    }); 

編集

は、内容を変更して、それを下にスライドさせるslideUp-コールバックを使用する例を更新しました再び。

Answer 4

の高さに調整されますので、あなたは異なる内容の固定の高さを必要とする場合、私は知らない は、ここで私はslideUpとダウンを使用しました - >

$(document).ready(function() { 
$("#menubtn1").click(function() { 
     $(".container").animate({height:"0px"}, function() { 
      $("#hidden-content").hide(); 
      $("#show-content").show(function() { 
       $(".container").animate({height:"200px"}) 
      }); 
     }); 
    }); 
});