为什么 Firefox 3.6 会改变 jQuery 和 CSS 属性?
好吧,更具体一点。我有一个交叉淡入淡出插件,可以在彼此重叠的两个图像之间创建发光效果。该函数(在下面发布)将使顶部图像在悬停时在 200 毫秒内过渡到不透明度为 0,在悬停时在 500 毫秒内过渡回不透明度为 1。我的问题是原始图像现在没有在 Firefox 3.6.6 中显示。
HTML 看起来像这样:
<div id="logout-button">
<img class="fade" src='/img/test/control-logout.jpg' style="background:url(/img/test/control-logout-hover.jpg); border:none;"/>
</div>
CSS 看起来像这样:
#control-bar #logout-button{
float:right;
margin:3px 30px 0 0;
}
#logout-button img.fade{
margin:-1px 0 0 0;
width:33px;
height:22px;
cursor:pointer;
border:none;
}
jQuery 函数页面如下所示:
$(window).bind('load', function(){
$("img.fade").crossfade();
});
jQuery Crossfade 插件看起来像这样:
$.fn.crossfade = function(){
return this.each(function(){
var $$ = $(this);
var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
$$.wrap('<span style="position: relative;"></span>').parent().prepend('<img>').find(':first-child').attr('src', target).css({border:'none'});
if(jQuery.browser.msie){
$$.css({position:'absolute', left:0, top:'0px', border:'none'});
}else{
$$.css({position:'absolute', left:0, top:'-6px', border:'none'});
};
$$.hover(function(){
$$.stop().animate({opacity: 0}, 200);
}, function(){
$$.stop().animate({opacity: 1}, 500);
}, 0);
});
};
最佳答案
在这里,这会做到:http://jsfiddle.net/nfLrg/
在那里进行了一些认真的调试之后,我发现 carpie 发现的相同,即..
var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
..在结果周围留下引号,稍后在图像中插入它时 src
, 引号加倍导致 src="%22<target>%22"
与 %22
是双引号。
因此,把它改成..
var target = $$.css('backgroundImage').replace(/^url|[\(\)]|['"]/g, '');
..将删除不需要的引号。 (请参阅正则表达式中添加的 |['"]
)
另外,我删除了所有不必要的 .css()
调用,因为在 css 本身内部处理这些调用要容易得多。
这是我使用的所有 CSS:
#logout-button {
}
#logout-button img.fade {
cursor: pointer;
}
#logout-button span.fake img {
position: absolute;
}
是的,在 jsFiddle CSS 中,我留下了更多标签并对其进行了评论。
顺便说一句,在 IE6、IE7、IE 8、Firefox 3.6、Google Chrome 5、Opera 10.60、Safari 4.0.5 上测试并完美运行。这让我觉得它也应该适用于其他浏览器。
编辑:
实际上,我认为有更简单的解决方案可用。我明天回家时会检查一下。
关于jquery - 为什么 Firefox 3.6 会改变 jQuery 和 CSS 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3238472/