jquery - ボックスの底にボックスを設定する方法は?

Question

ボックス（イン）の高さと等しくないボックス（アウト）にあるボックス（イン）を下から上にアニメーション化するためにCSSの位置を設定するにはどうすればよいですか。

私がアニメーション化しようとしているのは次のとおりです。

$('#box-out').hover(function(){
    $('#box-in').animate({height: '400px'},2000);
});

ホバーすると下に広がりますよね？上に広げてほしいだけです。それを可能にするには、ボックスの底に押し込む必要があります（アウト）。

それ、どうやったら出来るの？確認してください: http://jsfiddle.net/DxEMT/

Answer 1

絶対位置 #box-in inside #box-out with bottom: 0; そして #box-out を与えてposition-relative ください。

#box-out{
   width:300px; 
   height:400px; 
   border:1px solid black; 
   position: relative;
} 
#box-in{
   float:left; 
   width:300px; 
   height:100px; 
   background:red; 
   position:absolute;
   bottom:0px;
} 

残りは既存のコードと同じです。

作業例: http://jsfiddle.net/DxEMT/2/

Answer 2

試す

#box-out{
    width:300px; 
    height:400px; 
    border:1px solid black; 
    position: relative;
} 
#box-in{
    width:300px; 
    height:100px; 
    background:red; 
    position:absolute;
    bottom:0;
} 

デモ:フィドル

Answer 3

$('#box-out').hover(function(){
    $('#box-in').animate({
        height: '-400px'
    },2000);


});

高さを反転させて上に伸ばす？