Javascript 使用jquery动画效果设置图像动画

我正试图用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中实现与产品菜单相同的鼠标悬停效果

---

谢谢

我还没有测试过这一点，但我会这样做：

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

---

您可能需要将

{backgroundPosition:“（50%0px）”}

更改为

{backgroundPosition:“（50%0）”}

，因为单位对于零值来说是无关紧要的。另一件事，您通过多个对象传递

animate（）

，而您应该传递一个包含多个条目的对象，即

{backgroundPosition:“50%100px”，duration:600}

而不是

{backgroundPosition:“50%100px”}，{duration:600}

。谢谢罗杰，是的，这也是一种很好的方法。但是，使用此选项，它仍然会显示普通动画，如slideup。如果你将鼠标悬停在参考网站“Shop”菜单上，它会显示简单的动画，我可以实现这一点，但无法实现鼠标悬停在“products”菜单上的动画。产品的尺寸会增大，而不是向上滑动，因此你需要为该实例提供单独的效果。不确定你是否可以设置背景大小的动画，尽管图像的大小在增加，对吗？原稿是用flash完成的。您可以尝试缩放效果，但同样，此实例需要单独的效果。