Javascript-форум - Задержка между событиями

Есть на странице блок который должен выезжать с помощью функции animate() когда к краю окна подводится мышка.

<body>

  <div class="main-menu">
      content main-menu
  </div>

  <div class="container">
  	content container
  </div>

<script>
$("body").mousemove(function(pos){
    if(pos.pageX<50){
		$(".main-menu").animate({"margin-left":"0px"},150);
	}
	
	$(".main-menu").mouseout(function(){ 
	   $(this).animate({"margin-left":"-250px"},150); 
	});
});
</script>

CSS:

Код:

.main-menu{

        border:1px solid red;

        position:fixed;

        height:100%;

        width:250px;

        max-width:250px;

        margin-left:-250px;

}

Но почему то, между тем когда подводишь и убираешь курсор есть пауза, до 1сек, а то и больше может быть. откуда она возникает и как от нее избавиться?
p.s.
Когда animate() заменил на css() - все хорошо стало работать, но все же интересует плавное появление.