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