[Resolvido] [jQuery] Problema com o .animate() ao mecher a div

Bom estou tentando fazer um código

Para que a div que eu queira se mecha no momento em que passar o mouse por cima dela

e volte ao normal depois de tirar o mouse de cima dela

<style>
#div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width:600px;
height:600px;
background-color:#66CCFF;
position:absolute;
left:10px;
}

</style>
<script src="library/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

$('#div').mouseover(function() {

 $("#div").animate({"left": "+=100px"}, "slow");

	});

 //Quando o Mouse sair da div ela volta pra posição normal XD
 $('#div').mouseout(function(){
 $('#div').animate({"left:" "-=100px","slow"});

 });

});

</script>

<div id="div">

Testando XD </div>

o Problema é o seguinte Toda vez que passa o mouse por cima

vai adcionando + 100px para a esquerda , eu queria que isso acontecesse apenas umas vez

, e quando coloco o mouseout(); a div nao se meche mais

Desde Já Agradeço

Grande Abraço!