mouse hovering

[Violet_82]

Hello there, I wonder if you can help me with a jquery issue.
I am at the moment reading a book about it and there is an example in there, which you can
see here http://antobbo.webspace.virginmedia.com/various_tests/worktest/chapter_03/09_animated_navigation/index.html
If you hover on the navigation you will see the jquery effect kicking in
Now the book explains it roughly how that works but there are a few things I am not too sure about
So let's have a quick look at some of relevant bits of code.
HTML:

<div id="navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Buy Now!</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Gift Ideas</a></li>
        </ul>
      </div>

CSS:

#navigation {   
  margin: 0 0 10px 0;
  padding: 0;
    list-style-type: none;  
    position: relative;
    z-index: 1;

    /* overwrite base */
    float:none;
    width:100%;
}

#navigation ul {
  margin: 0;
  padding: 0;
}

#navigation li {
    display: inline;
    margin: 0;
    padding: 0;
}

#navigation a {
    color: #015287;
    display: inline-block;
    padding: 5px;
    text-decoration: none;
}

#navigation-blob {
  top: 0;
    background-color: #c0ffee;
    position: absolute;
    z-index: -1;
}

JQUERY

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

  $('#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
      var leftPosition = $('#navigation li:first a').position().left;
      $('#navigation-blob').animate(
      {width:'hide'},
            {duration:'slow', easing: 'easeOutCirc', queue:false}
        ).animate({left: leftPosition}, 'fast' );
  });
});

and then there is the jquery plug in

Now what isn't that clear is a few passages in the jquery script.
With the following:

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

we simply add another div, which will be the so colled blob behind the navigation items, so this is fine.
the width is the same width as the navigation item +10px as well as the height.

Then with this:

 $('#navigation a').hover(function(){ 
    // Mouse over function
      $('#navigation-blob').animate(
      {width: $(this).width() + 10, left: $(this).position().left},
        {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );

when the navigation item is hovered on the navigation blob is animated so that the width of
the blob is increased of 10 px more than what it was before (?) and the new left position is determined. But
what's the new left position? I don't get it. The duration and easing are ok, that's clear, I just don't understand how
the new position where to move the blob to is determined.
and here:

// Mouse out function
      var leftPosition = $('#navigation li:first a').position().left;
      $('#navigation-blob').animate(
      {width:'hide'},
            {duration:'slow', easing: 'easeOutCirc', queue:false}
        ).animate({left: leftPosition}, 'fast' );
  });
});

again I don't understand how the new left position is determined, all we do is to call position().left which
will return the current position, but isn't this current position the same as the previos left position
when you hover the mouse over the list item? SOrry I am a bit confused

[pritaeas]

$('#navigation a').hover(function(){ 
    $('#navigation-blob').animate(
        {width: $(this).width() + 10, left: $(this).position().left},
        {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );
});

Because $(this) is a parameter of the animate function, it does not point to the blob, but to the #navigation a which you are hovering over. So the width is 10 wider than the a, and the left would be the same.

[Violet_82]

oh does it really point to the #navigation a? I think that confused me a bit. Now, why is that, I mean, is that because hovering is an event and animate is not?

[pritaeas]

In the hover function $(this) points to the link. The animate function is called on the blob, but that does not change the scope of $(this). I think the simplest (but not complete) way to look at it is that loops, callbacks and events influence $(this). A nice description can be found here.