Question

What I am confused about is why $(this) is pointing to ‘#navigation a’ objects and not ‘#navigation_blob’ object? To be clear I know what $(this) does. I am just confused about the scoping in this example.

Thanks!

Taken from “Jquery novice to ninja”:

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

Answer 1

this points to the context on which it was invoked. jQuery passes the element you searched as the context, hence this point to '#navigation a'.

$(this) takes the DOM element (referred by this) and wraps it in a jQuery object.

Inside $('#navigation_blob').animate(), this will point to 'navigation_blob'.