Question

我尝试了几个小时的动画来更改我网站的背景图片。当我在谷歌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过渡以及何时支持CSS3，请不要这样做。做脚本。执行此操作需要花费很长时间才能在jQuery中更改每一帧的值，并且CSS尝试使每个更改持续0.4s ......

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

1 个答案: