• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Need Help With This jQuery Code

TheBigK

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

HTML:
$(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

XenForo moderator
Staff member
#2
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.

Code:
console.log('hehe');