Hi, I’m working through the Jquery Ninja book and all is going well right up to chapter 03/09-animated navigation. I’m supposed to animate the background of an <li> on mouse over/mouse out. I can get the animated blob to work, however, it appears after the <ul>, not behind the <li>. See the code attached and also a screen shot of where the blob appears on page load - I’ve styled the blob red so you can see it easily.
Where am I going wrong?
//create wobbly blob
$('<div id="topnav_blob"></div>').css({
width: $('#topnav li:first a').width() + 10,
height: $('#topnav li:first a').height() + 10
}).appendTo('#topnav');
//trigger blob
$('#topnav a').hover(function(){
//mouse over event
$('#topnav_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'elasticEaseIn', queue: false }
);
}, function() {
//mouse out event
$('#topnav_blob')
.stop(true)
.animate(
{ width: 'hide' },
{ duration: 'slow', easing: 'circEaseOut', queue: false }
)
.animate(
{ left: $('#topnav li:first a').position().left });
});
