Javascript-форум - блок перемещается за курсором

Здравствуйте.
Нашел скрипт, немного подредактировал.
Теперь при наведении на один из квадратов, над ним появляется надпись.
Но мне нужно, чтобы эта надпись плавно подъезжала к квадрату при наведении курсора на квадрат и центрировалась по квадрату, а не ездила за курсором, пока он наведен на квадрат, как сейчас.

Если в скрипте заменить строчку

$('#button').css('left', x);

на

$('#button').animate({left:x}, 1500)

то этот дает что-то похожее на правду, но анимация срабатывает только единожды.
Подскажите, что изменить, чтобы было как мне надо?

http://jsfiddle.net/sqqpn/

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  <script src="js.js"></script>
 </head> 
 
<body>
	<div id="container">
	
		<div id="block">
			<div></div>
			<div></div>
			<div></div>
		</div>
		
		<div id="button">ЫЫЫЫЫЫ</div>
		
		
	</div>
 </body> 
</html>

CSS

Код:

#block div{

        width: 100px; 

        height: 100px;

        float: left;

        margin:50px;

        background: lightgreen;

}



#button{

        position:absolute;

}

JQUERY

$(function () {   

  wW = $('#block').width();
  oL = $('#block').offset().left;
  fW = $('#button').width();

  $('#block').mousemove(function(e){
    x = e.pageX-fW/2;

    if (x >= wW+oL-fW) {x = wW+oL-fW;};
    if (x <= oL) {x = oL;};
   
    $('#button').css('left', x);
  });

});