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