how to create a smooth animated hover background following pointer

Question

here's the menu i want to to something similar to it ( the red nav bar )

[http://www.toyota.com/avalon/#!/features][1]

as you move the mouse you notice that the background is following the mouse but finally centered behind the menu item not just following it.

i'm looking for an example so i can learn from it and do something similar to it because in the mentioned page i can't get the jquery script that does the job here's the ready test page

[http://jsfiddle.net/j55nM/][2]

thanks in advance

Answer 1

Something like this probably

$('#example2 a').hover(function(e){
   var pos = $(this).position().left;
   $('img').stop().animate({left:pos}); 
});

FIDDLE

Answer 2

You're looking for a "LavaLamp" jQuery effect.

See here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/