Javascript css转换在firefox上不起作用
我有一个类似的问题,但我似乎可以找到一种方法来解决它以不同的方式针对元素或删除类 以下是我所拥有的: 标记:Javascript css转换在firefox上不起作用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个类似的问题,但我似乎可以找到一种方法来解决它以不同的方式针对元素或删除类 以下是我所拥有的: 标记: <div class="ball b40 first"> <a class="ffx-fx" href="javascript:void(0)"> </a> </div> } } js: 我不相
<div class="ball b40 first">
<a class="ffx-fx" href="javascript:void(0)">
</a>
</div>
}
}
js:
我不相信你可以切换背景图像的过渡。至少我没有试过。我通常如何处理这种情况是有两个内部div——一个是on-hover类,另一个是off类。然后在悬停时,我更改不透明度。不透明度转换工作。所以像这样的事情 HTML 这是一个粗略的版本,但我一直都是这样做的
注意:jQueryUI还能够缓慢地添加类。您可以在此处查看:。它可能更容易使用 因此,应该发生的是,转换似乎设置在不同的元素上,而不是您正在更改类的元素上。它在其他浏览器中工作吗?你不能在背景图像之间转换。但是,您可以堆叠背景图像并更改不透明度。
.ffx-fx {
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.b40 a {
width:220px;
height:220px;
background: url(../images/temp/1_a.jpg) center center;
background-size: 100% 100% !important;
.b40 .b40-rotated {
width:220px;
height:220px;
background: url(../images/temp/1_b.jpg) center center !important;
window.setInterval(function() {
$( ".b40 .ffx-fx" ).toggleClass( "b40-rotated" );
}, 5000);
<div class="container">
<a href="">
<div class="off_state"></div>
<div class="on_state"></div>
</a>
</div>
.container{position:relative;}
.off_state, .on_state{
position:absolute;
top:0;
left:0;
transition: all 1s;
}
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);}
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}