javascript - Jqueryの背景色効果

Question

背景色を左から右に変更する効果を作成しようとしています。

私はこれを作成しました：http://jsfiddle.net/kT95d/58/

    <style>
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}

#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}

<script>
    $('#div1').mouseover(function (){
    $('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="div1">
<div id="back">
That was amazing!
</div>
</div>

しかし、私はテキストを水平にして、どのように見えるかを知りたいのですが、これは垂直で、効果が水平になった後です。これがこれを行うための最良の方法であるかどうかはわかりません。私を助けることができますか？ありがとう！！