Animate image with jquery Animation effect

Question

I am trying to animate top menus with jQuery for this website http://www.homeprideflour.co.uk/index.htm

I am not been able to animate products and collectiables menu image hover animation. I am using hover images as background and changing their position with Jquery. Here is my code

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

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

Can anyone suggest me how to achieve the mouseover effect same as product menu in above mentioned URL.

Thanks

Answer 1

I haven't tested this but ths is how I would approach:

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