Post rápido, para deixar registrado o código

 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var move = false;
var $box = null;
jQuery(document).ready(function(){
	$box = jQuery('.box').not('.active');
	
	$box.mousemove(function( e ){
		e.stopPropagation();
	});
	$box.mouseenter(function(){
		var $this = jQuery( this );
		$this.addClass('active');
	});
	$box.mouseleave(function(){
		var $this = jQuery( this );
		$this.removeClass('active');
	});

	jQuery(document).mousemove(function(){
		$box = jQuery('.box').not('.active');
	
		window.clearTimeout( stop );
		$box.stop(true, true).fadeIn( 700 );
		
		stop = window.setTimeout(function(){
			mousestop();
		}, 500 );
	});
	window.setTimeout(function(){
		$box.fadeOut( 2000 );
	}, 500);
});
function mousestop(){
	jQuery('.active').append('parou');
	jQuery('.box').not('.active').stop(true, true).fadeOut( 2000 );
}
</script>
<style type="text/css">
.box {
	background: #f0f;
	width: 70px;
	height: 70px;
	float: left;
	margin: 20px;
	text-align: center;
	color: #fff;
	font: 14px/65px Tahoma, sans-serif;
	
	position: absolute;
}
#box1 { top: 30px; left: 0px; }
#box2 { top: 70px; left: 150px; }
#box3 { top: 150px; left: 20px; }
#box4 { top: 0px; left: 220px; }
#box5 { top: 150px; left: 300px; }

</style>
</head>
<body>
	<div class="box" id="box1">
		Box 1
	</div><!-- /box -->
	<div class="box" id="box2">
		Box 2
	</div><!-- /box -->
	<div class="box" id="box3">
		Box 3
	</div><!-- /box -->
	<div class="box" id="box4">
		Box 4
	</div><!-- /box -->
	<div class="box" id="box5">
		Box 5
	</div><!-- /box -->
</body>
</html>

Dica: mecha o mouse, e deixe o mouse parado por um tempo.

Depois fique com o mouse sobre algum box, movimente dentro do box, e fique parado dentro dele.

Demonstração