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

任何人都可以建议我如何实现与上述网址中的产品菜单相同的鼠标悬停效果。

由于

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

使用jquery动画效果动画图像

1 个答案: