Hi.

I'm learning jquery from book Novice to Ninja and the Animated Navigation (site 64) is not working with jquery-1.5.1.min.js (it's workin fine with the old one - jquery-1.4.min.js but since there is new jquery avaliable i really don't want to use the old one).

Here is the code...

Code JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 
<style type="text/css">
<!--
#head {
	padding-left: 20px;
}
 
#navigation {	
  margin: 0 0 10px 0;
  padding: 0;
	list-style-type: none;  
	position: relative;
	z-index: 1;
 
	/* overwrite base */
	float:none;
	width:100%;
}
 
#navigation ul {
  margin: 0;
  padding: 0;
}
 
#navigation li {
	display: inline;
	margin: 0;
	padding: 0;
}
 
#navigation a {
	color: #015287;
	display: inline-block;
	padding: 5px;
	text-decoration: none;
}
 
#navigation_blob {
  top: 0;
	background-color: #c0ffee;
	position: absolute;
	z-index: -1;
}
 
p#intro {
  clear: both;
  margin-top: 10px;
}
 
-->
</style>
</head>
 
<body>
<script type="text/javascript">
 
$(document).ready(function(){
  $('<div id="navigation_blob"></div>').css({
		width: $('#navigation li:first a').width() + 10,
		height: $('#navigation li:first a').height() + 10
	}).appendTo('#navigation').hide();
 
  $('#navigation a').hover(function(){ 
    // Mouse over function
	  $('#navigation_blob').animate(
      {width: $(this).width() + 10, left: $(this).position().left},
	    {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );
  }, function() { 
	  // Mouse out function
	  var leftPosition = $('#navigation li:first a').position().left;
	  $('#navigation_blob').animate(
      {width:'hide'},
			{duration:'slow', easing: 'easeOutCirc', queue:false}
		).animate({left: leftPosition}, 'fast' );
  });
});
 
 
</script>	
      <div id="navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Buy Now!</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Gift Ideas</a></li>
        </ul>
      </div>
</body>
</html>


Any suggestion what do i have to cange in jquery code to be compatible with jquery-1.5.1.min.js?