raphael.js + jQuery "zvezno" premikanje

Naredil sem skripto, s katero lahko premiam krog (tpke gor,dol,levo,desno). Deluje ok, rad pa bi, da bi se krog premikal bol gladko in brez (časovnega) zamika na začetku. Moja koda:

$(document).ready(function(){
	function up(){
		y=parseInt($("#circle").attr("cy"));
		if(y>20)
		y=y-10;
		$("#circle").attr("cy",y);
		}
	function down(){
		y=parseInt($("#circle").attr("cy"));
		if(y<480)
		y=y+10;
		$("#circle").attr("cy",y);
		}
	function left(){
		x=parseInt($("#circle").attr("cx"));
		if(x>20)
		x=x-10;
		$("#circle").attr("cx",x);
		}
	function right(){
		x=parseInt($("#circle").attr("cx"));
		if(x<780)
		x=x+10;
		$("#circle").attr("cx",x);
		}
	
	var paper = new Raphael(document.getElementById('wrap'), 800, 500);  
	var circle = paper.circle(400,250,20);
	circle.attr({
		fill:"white",
		"stroke-width":3
		});
	circle.node.id="circle";
	
	$(document).bind('keypress', function(e) {
		if(e.keyCode==38)
			up();
		else if(e.keyCode==40)
			down();
		else if(e.keyCode==37)
			left();
		else if(e.keyCode==39)
			right();
	});
});

pardon nisem videl da ne štimaš cx pa cy preko cssja.. pol si napiši neko tako funkcijo (daš ji novo vrednost, potem uporabiš linearno interpolacijo med staro in novo in prožiš nek setTimeout/setInterval da postopoma spremeniš iz stare v novo).