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…
<!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?