[dupre]

рони, добрый вечер! По клику

<div class="phone-keys">1</div>

сдвигается влево и по клику возвращается в исходное положение. Возвращаясь в исходное положение div, прежде, чем остановиться, делает несколько движений вправо-влево. Как сделать так, чтобы при возврате в исходное положение div останавливался сразу же, без лишних движений?

Код css:

.phone-keys{width: 100px;height: 100px;float: left;background: gray; border: 1px solid yellow;margin-left: 150px;}

Код js:

$(document).ready(function(){
	$('*').on('click', function(){
		$('.moved').animate({'left':'0'}, 500, function(){
	    	$(this).removeClass('moved');
	    });
	});
	$(".phone-keys").not('.moved').on('click', function(){
	    $(this).css('position', 'relative').animate({'left':'-50px'}, 500, function(){
	    	$(this).addClass('moved');
	    });
	});
});

Вполне ли хорош код для реализации данной задачи, или здесь было бы уместней написать его, как либо иначе?