onhover not returning to the lefthand element

onhover not returning to the lefthand element

Hello All,

I am following the tutotial and got stuck on chapter 3/9. When you hover over the menu it all works fine, but when moving away, the highlight moves to the left (as it should) but immediately moves back to its current position. Also I believe that the highlight should be on the lefthand side after the page finishes loading. The highlight only shows when hovering over the menu with the mouse, but then it stays. I have added the code below, can anyone point out where it goes wrong?

Regards,

Arend

$(document).ready(function(){
  $('#celebs tbody tr:even').addClass('zebra');

  $( '<input type="button" id="toggleButton" value="Hide" />' ).insertAfter( '#disclaimer' );
  $( '#no-script' ).remove();
 
  $('#bio > div').hide();
 
  $('#bio h3').click(function() {
    $(this).next().animate({'height':'toggle'}, 'slow', 'easeOutBounce'
    );
  });
 
  $('<div id="navigation_blob"></div>').css({
    width: 0, height: $('#navigation li:first a').height() + 10
    }).appendTo('#navigation');
 
  $('#navigation a').hover(function() {
  // Mouseover function
    $('#navigation_blob').animate(
        {
            width: $(this).width() + 10,
            left: $(this).position().left
        },
        {
            duration:'slow',
            easing: 'easeOutCirc',
            queue: false
        });
      }, function() {
      // Mouseout function
    $('#navigation_blob').animate(
        {
            width: $(this).width() + 10,
            left: $(this).position().left
        },
        {
            duration:'slow',
            easing: 'easeOutCirc',
            queue: false
          })
        .animate(
        {
             left: $('#navigation li:first a').position().left
            }, 'fast'
        );
    });
 
  $( '#toggleButton' ).click(function() {
     $( '#disclaimer' ).slideToggle('slow', function(){ // run this code AFTER the slide.
          if ($(this).is(':visible')) {
              $('#toggleButton').val('Hide');
          } else {
              $('#toggleButton').val('Show');
          }     
    })});
})