jquery divアニメーションの上にテキストをジャンプする

Question

アニメーション化された色付きのブロックにテキストを入れたいと思います。最終結果は、ユーザーが特定の気温をクリックしたときに上昇する温度計のようなものですが、私はまだそこにいません！

とにかく、私は赤いものをdivを底に置き、次にdivを温度計の写真とし、上の数字をテキストとして置きます。次に、基本的なjQuery CSSアニメーションを使って、数字をクリックすると赤いdivを温度計の上に移動できます。

私はこれまでのところ、このJavascriptを持っている：

$(document).ready(function() 
    { 
    $("#1").click(function(){ 
    $("#box").animate({height:"300px"},"slow"); 
    }); 
    $("#2").click(function(){ 
    $("#box").animate({height:"100px"},"slow"); 
    }); 
}); 

は、ここに私のHTMLです：

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> 
    <p id='1'>hello</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p id='2'>goodbye</p> 
</div> 

私は "ハロー" pをクリックすると、緑の四角はそれが必要として展開し、私がクリックしたとき「さようなら」pでは、緑色の四角形は正確には—のように収縮しますが、両方の時間でテキストがジャンプします。

これを回避する方法はありますか？それはむしろ単純なアニメーションですが、私はあまりjQueryに熟練していません。

Answer 1

は、このCSSを使用します。

p { 
    margin: 0px; 
} 

それは私のために正常に動作していますjsFiddle