jquery - box-sizing: border-box の div の jquery で高さをアニメーション化する

Question

次のスタイルで div を正しくアニメーション化する方法はありますか?

.div1{
 background-color: red;
 padding: 5px;
 margin: 5px;
 width: 100%;
 border: 4px solid #000 !important;
 border-radius: 8px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 height: 200px;
}

ここで指定されたすべての css スタイルが必要です。私の問題は、アニメーションの開始時にオフセット エラーが発生することです (ここでhttp://jsfiddle.net/q5bmf/1/を見ることができるように、例が読み込まれると、どこかから 200px までのアニメーションがあります)。この例は、1 つ以上の css スタイルを非表示にする場合に機能しますが、非表示にしたくありません。jqueryを正しく動作させる方法はありますか？