1. 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

Discussion in 'Off Topic' started by TheBigK, Sep 19, 2015.

  1. TheBigK

    TheBigK Well-Known Member

    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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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');
    
     

Share This Page