jQuery中與將backgroundImage更換的backgroundColor動畫效果

我有一個工作淡入/淡出jQuery的例子在這裏： http://jsfiddle.net/mcgarriers/NJe63/6/jQuery中與將backgroundImage更換的backgroundColor動畫效果

不過，我想知道是否有可能取代背景色的紅色效果與背景圖片？

非常感謝任何指針

2012-08-27 michaelmcgurk

這個問題可能的重複：http://stackoverflow.com/questions/977090/fading-in-a-background-image –

如何嘗試這樣的事情？

我改變了你的jsfiddle鏈接的代碼。

$('.box').mouseenter(function(){ 
    $(this).stop().animate({opacity: 0}, 0).css('background', 'url(http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg)').animate({ opacity: 1 }, 1000); 
}).mouseleave(function(){ 
    $(this).stop().animate({opacity: 1}, 0).css('background', 'white'); 
});

來源

2012-08-27 21:39:03 dotfury

我試過這裏：http://jsfiddle.net/mcgarriers/NJe63/12/，但正如你可以看到它不按預期工作。有任何想法嗎？ – michaelmcgurk

你應該從css刪除'background：white' –

Hi Dariush。可悲的是，這似乎仍然沒有幫助。我的Google徽標圖像應該始終保持完全消失。並沒有BG圖像加載：/ – michaelmcgurk

你可以用CSS3做到這一點。你可以在圖像周圍創建一個div標籤來選擇你選擇的尺寸，然後使用基本的CSS3轉換。

#yourdiv a { 
    background-color: #FFF; 
} 

#yourdiv a:hover { 
    background-color: #000; 
    -webkit-transition: background-color 600ms linear; 
    -moz-transition: background-color 600ms linear; 
    -o-transition: background-color 600ms linear; 
    -ms-transition: background-color 600ms linear; 
    transition: background-color 600ms linear; 
}

或者你可以有一個圖像褪色成另一種與CSS3： http://css3.bradshawenterprises.com/cfimg1/

來源

2012-08-27 21:37:00 matt

對不起，我應該在我的問題更清楚 - 可悲的是這需要工作在IE瀏覽器，所以我不認爲我可以使用這個答案。無論如何謝謝:) – michaelmcgurk

您不能淡化/淡出HTML元素的背景圖像，但可以使用背景顏色。

它可能是你的解決方案嗎？ Fade background image in and out with jQuery?

來源

2012-08-27 21:48:11 lnguyen55

jQuery中與將backgroundImage更換的backgroundColor動畫效果

回答

相關問題