jQuery的CSS動畫，背景圖片

Question

我有這樣的javascript代碼：

$(".linksColl a li").hover(function() { 
       $(this).css({ 
        "background-image" : "url(images/links/linkHover1.png)", 
        "background-position" : "center center", 
        "background-repeat" : "no-repeat"});    
     }); 

     $(".linksColl a li").mouseout(function() { 
       $(this).css({ 
        "background-image" : "", 
        "background-position" : "", 
        "background-repeat" : ""});      
     }); 

我想動畫添加到它像fadeIn和fadeOut爲背景圖像，所以當懸停fadeIn影響申請背景圖像和鼠標移開時fadeOut效果申請背景圖片

我該怎麼做呢？

Answer 1

我不認爲你可以做到這一點。但是，這仍然是實現你想要的。例如，您可以創建一個包含背景圖像和淡出此容器的包裝DIV（或ul）（您不能淡出背景，但可以淡化容器DIV而不會出現問題）。如果由於構建html頁面的方式而導致這太難了，可以將背景圖像轉換爲簡單的圖像（），並使用z-index -1作爲背景，然後淡入淡出此img。

Answer 2

集ID爲圖像

$('.linksColl a li').mouseenter(function() { 
     $('#img').fadeIn('slow', function() { 
     // Animation complete 
     }); 
    }); 

$('.linksColl a li').mouseout(function() { 
     $('#img').fadeIn('slow', function() { 
     // Animation complete 
     }); 
    }); 

希望這有助於.....