jquery - 平滑更改背景图片，Chrome 可以，但 IE 不行

Question

我正在尝试使用几个小时的动画来更改我网站的背景图片。当我在 Google Chrome 浏览器上尝试它时，它很容易，但后来我在 Internet Explorer 中尝试它，但它不起作用。同样的问题也有 Mozilla Firefox。我正在寻找一些关于如何在 jQuery 中执行此操作的教程，但没有任何效果。

你能帮帮我吗？

我想让动画在所有浏览器上都能运行。

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我的元素。

Answer 1

您可以为所有浏览器修复此问题，方法是添加另一个包含悬停图像的 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 秒...