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