javascript - Jquery 効果 - マウス ホバー時の背景色の変更。

Question

これにマウスを合わせると背景色が左から右に変わるという効果を作成しようとしています。私はこれを試しました：

http://jsfiddle.net/WVWKE/

$('#div1').mouseover(function(){
$('#back').animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
$('#back').animate({width: '0px'}, 1000).stop();
});

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

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


<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>

しかし、正しく動作していません。マウスをdivに何度も置くと、これは何度も効果を発揮し、しません。マウスを置いて何度も離れてみてください。効果は何度も起こります。何か助けはありますか？