Animare sprite destra/sinistra con un click

[narghat]

Ho dei problemi con questa animazione jQuery.
Dovrebbe caricare animazione a destra o sinistra a seconda di dove clicchi
Lo script non carica sempre l'animazione corretta e la velocita aumenta ogni volta che clicchi nella stessa direzione.
Il codice per le animazioni l'ho preso da qui 2d-sprite-animation
Devo aver combinato qualcosa con il setInterval

Html

<div id="divposizione">MOUSE XY</div>	
<div id="mappa" style="width:960px; height:80px;  
   background-color:black; "> 	
 <div id="player"></div>  
</div>
<style> #player{background-image:url('girl_60x60.png'); 
	width:60px; height:60px; position:relative; 
	z-index:12; left:465px;}</style>

Javascript

 // click event 
 $('#mappa').click(function(e) { 
  // prendo le coordinate
  var posX = e.pageX ;
  var posY = e.pageY;
  //stampa le coordinate X e Y nel riquadro
  $('#divposizione').html("X: " + posX + " Y: " + posY);	
	
  if (posX <= 480) {   //controlla click rispetto al centro
  
   setInterval('ani_left()',100); //animazione sinistra								
  } else {				
   setInterval('ani_right()',100); //animazione destra
  }
}); 

var frame = 1;

//  Animazione destra
function ani_right() {
 var left = 60 * frame;  //ogni frame sposta di 60px
 var top = 0;
 $('#player').css('backgroundPosition','-'+left+'px -'+top+'px');
 frame++;
}
//  Animazione sinistra
function ani_left() {
 var left = 60 * frame;
 var top = 60;   //animazioni riga sottostante di 60px
 $('#player').css('backgroundPosition','-'+left+'px -'+top+'px');
 frame++;
}