Анимированное изображение с эффектом jquery

Question

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

Я не смог анимировать при наведении мыши на изображение в меню товаров и предметов коллекционирования. Я использую парящие изображения в качестве фона и меняю их положение с помощью 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})
        });