使用jquery动画效果制作图像动画

Question

我正在尝试为这个网站的http://www.homeprideflour.co.uk/index.htm用jQuery动画顶层菜单

我无法对产品和收藏品菜单图像进行动画悬停动画。我使用悬停图像作为背景，并使用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})
        });