Need Help With This jQuery Code

[TheBigK]

I'm stuck with this jQuery code, trying to figure out why the block has been repeated. First, let me post the code: -

$(document).ready( function () {
    $('<div id="navigation_blob"></div>').css({
      width: 0,
      height: $('#navigation li:first a').height() + 10
    }).appendTo('#navigation');

    $('#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
        $('#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'
            );
        }
    );
});

As you'd have guessed, this thing adds a simple blob to the horizontal navigation menu and it runs fine. I'm however, unable to understand why the mouse over and mouse out functions have been repeated? Each animate repeats:

width: $(this).width + 10,
left: $(this).position.left

How does this really work?

 

[Jake Bunce]

That doesn't immediately make sense to me either. But I have seen cases where hover events don't fire reliably. Maybe the duplication is to ensure the hover state when the mouse out event fires.

Some debugging using the js console can help to confirm exactly what is firing when.

console.log('hehe');