平滑改變背景圖片，Chrome的作品，但IE不是

我想要幾個小時的動畫改變我的網站的背景圖片。當我在Google Chrome瀏覽器上試用它時，這很容易，但之後我在Internet Explorer中嘗試了它，但它不起作用。 Mozilla Firefox也存在同樣的問題。我正在尋找一些關於如何在jQuery中做到這一點的教程，但沒有任何不適用。平滑改變背景圖片，Chrome的作品，但IE不是

請幫助我嗎？

我想在每個瀏覽器上製作動畫。

HTML

<div class="div">Text</div>

CSS

.div { 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/button.png); 
    width: 150px; 
    height: 150px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.div:hover { 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/hover.png); 
    width: 150px; 
    height: 150px; 
}

這裏是我的項目的JSFiddle。

來源

2014-07-23 coky

您知道現在可以使用漸變/ box-shadow ，對？全部取決於你想支持IE多遠。我會建議用css3來做這件事，併爲舊的IE做一個回退。 – Dharman

您可以通過添加另一個包含您的懸停圖像和淡入淡出的div來解決所有瀏覽器的問題。它更加一致，並且可以在所有瀏覽器中運行。你將不得不把你的內容放在另一個div中，並給它一個更高的z-index，但它基本上解決了你的問題。

你的HTML會是這樣：

<div class="div"> 
    <div class="hover"></div> 
    <div class="content">Content in here</div> 
</div>

而且繼承人的CSS：

.div { 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/button.png); 
    width: 150px; 
    height: 150px; 
    position: relative; 
} 
.div > div { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
}  
.div > div.content { 
    z-index: 2; 
} 
.div > div.hover{ 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/hover.png); 
    opacity: 0;    
    -webkit-transition: all 0.5s ease;  
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.div:hover > div.hover { 
    opacity: 1; 
}

你甚至可以使用jQuery使它在舊的瀏覽器以及工作：

$(".hover").parent().mouseover(function(event){ 
    $(this).find(".hover").stop().animate({"opacity": 1}); 
}).mouseleave(function(){ 
    $(this).find(".hover").stop().animate({"opacity": 0}); 
});

雖然當你這樣做，要麼檢查Javascript，如果它支持CSS3轉換和它的時間，不要;做腳本。需要花費很長時間才能執行此操作，並使用jQuery中每幀的值進行更改，並且CSS試圖使每次更改持續0.4秒...

來源

2014-07-23 13:21:38 somethinghere

我非常感謝你，你爲我節省了很多時間和麻煩。 – coky

平滑改變背景圖片，Chrome的作品，但IE不是

回答

相關問題