如何在指针后创建平滑的动画悬停背景

Question

这是我想要的类似菜单（红色导航栏）

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

当您移动鼠标时，您会注意到背景跟随鼠标，但最终居中于菜单项后面而不仅仅是跟随它。

我正在寻找一个例子，所以我可以从中学习并做类似的事情，因为在上面提到的页面中，我无法获得在这里完成工作的jquery脚本是准备好的测试页

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

提前致谢

Answer 1

你正在寻找一个“LavaLamp”jQuery效果。

见这里：http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Answer 2

这样的事可能

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

FIDDLE