Animate изображения с JQuery эффектом анимации

Question

Я пытаюсь оживить топ меню с помощью JQuery для этого сайта http://www.homeprideflour.co.uk/index.htm

Я не был в состоянии оживить продукты и collectiables меню изображения парение анимации. Я использую hover-изображения в качестве фона и меняю свое положение с помощью JQuery. Вот мой код

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

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

Может кто-нибудь предложить мне, как добиться эффекта мыши, так же, как меню продукта в вышеупомянутом URL.

Благодаря

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}) 
     });