Search code examples
jqueryanimationmenuhoversmoothing

how to create a smooth animated hover background following pointer

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

Solution

  • Something like this probably

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

    FIDDLE