Firefox 3.6为什么改变jQuery和CSS属性？

Question

为什么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的淡入淡出插件看起来是这样的：

$.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); 
     }); 
    }; 

Answer 1

他再次，这将做到这一点：http://jsfiddle.net/nfLrg/

经过一番认真的调试那里，我发现了同样的东西carpie发现，...
var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
..leaves引号的结果，并在以后将其插入在图片src中，报价翻倍，导致src="%22<target>%22"，%22为加倍报价。

因此，改变成..
var target = $$.css('backgroundImage').replace(/^url|[\(\)]|['"]/g, '');
..will删除不需要的报价。 （看|['"]加入正则表达式）

另外，我删除了所有不必要的.css()调用，因为它更容易处理css内部的那些。

这是所有的CSS我用：

#logout-button { 
} 
#logout-button img.fade { 
    cursor: pointer; 
} 
#logout-button span.fake img { 
    position: absolute; 
} 

而且，是啊，在CSS的jsfiddle我留下了标签和评论他们。

顺便说一句，在IE6，IE7，IE 8，Firefox 3.6，Google Chrome 5，Opera 10.60，Safari 4.0.5上测试和完美工作。这种感觉让我觉得它也可以在其他浏览器上运行。

编辑：

其实，我认为有更容易的解决方案可用。明天我回家时我会检查他们。

Answer 2

当您创建与目标值：

 var target = $$.css('backgroundImage').replace(/^url|[\(\)]|/g, ''); 

目标值散发出来包裹在引号（“）。当src属性被设置时，它被双引号“”foo.jpg“”，因此是无效的HTML。

更改上面：

 var target = $$.css('backgroundImage').replace(/^url|[\(\)]|"/g, ''); 

将消除额外的报价，并应使其工作...

编辑： 嗯，它为我工作，但我不有一个旧的Firefox版...也许这将是更容易只是背景的url工作...

HTML：

<div class="pic"><div class="pic2"></div></div> 

CSS：

div.pic { 
    position: relative; 
    width:50px; 
    height: 48px; 
    background: url(http://static.jquery.com/ui/images/logo.gif); 
    float:right; 
    margin:3px 30px 0 0; 
} 
div.pic2 { 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
    background: url(http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif); 
} 

JS：

$.fn.crossfade = function(){ 
    return this.each(function(){ 
     var $$ = $(this).find('.pic2'); 
     $$.hover(function(){ 
      $$.stop().animate({opacity: 0}, 200); 
     }, function(){ 
      $$.stop().animate({opacity: 1}, 500); 
     }, 0); 
    }); 
} 
$("div.pic").crossfade(); 

您可以看到的jsfiddle一个活生生的例子：http://jsfiddle.net/MntuZ/1/

这对我的作品在FF3.6和Chrome 5（所有我在这台计算机上有访问权。）这是假设这个例子做你正在做的事...