为什么 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/ http://jsfiddle.net/nfLrg/

经过一番认真的调试后，我发现了同样的结果carpie发现，那个..
var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
..在结果周围留下引号，当您稍后将其插入图像中时src，引号加倍，结果是src="%22<target>%22" with %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 上测试并完美运行。这让我感觉它也应该适用于其他浏览器。

EDIT:

事实上，我认为有更简单的解决方案。明天我回家后我会检查一下。