与jQuery动画效果

Question

我试图动画与jQuery顶部菜单本网站http://www.homeprideflour.co.uk/index.htm

我没能动画产品和collectiables菜单图像悬停动画动画图像。我使用悬停图像作为背景，并使用Jquery改变它们的位置。这里是我的代码

$('.liproduct a').mouseover(function(){ 

     $('.prodimg').stop().animate(
     {backgroundPosition:"(50% 0px)"}, 
      {duration:600}) 
     }) 
    .mouseout(function(){ 
     $('.prodimg').stop().animate(
      {backgroundPosition:"(50% 100px)"}, 
      {duration:600}) 
     }) 

任何人都可以建议我如何实现鼠标悬停效果相同上述网址产品菜单。

感谢

Answer 1

我没有测试过这一点，但部份是如何将我的方法：

var $prodImg = $('.prodimg'); 
$('.liproduct a').on("hover",function(){ 
     $prodImg.stop().animate(
     {backgroundPosition:"(50% 0px)"}, 
      {duration:600}) 
     }, 
     function(){ 
     $prodImg.stop().animate(
      {backgroundPosition:"(50% 100px)"}, 
      {duration:600}) 
     });