编辑：

Question

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

好吧，更具体地说。我有一个交叉淡入淡出插件，可以在两个放在一起的图像之间创建一个发光效果。该功能（在下面发布）将使顶部图像在悬停时在200毫秒内转换为0的不透明度，并在悬停时转换回500毫秒的不透明度。我的问题是原始图像现在没有在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);
        });
    };

Answer 1

使用以下方法创建目标值时：

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

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

将上述内容更改为：

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

将消除额外的报价并使其有效......

修改嗯，它对我有用，但我没有一个较旧的firefox可用...也许只使用背景网址更容易...

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（我可以访问此计算机上的所有内容。）这是假设示例执行您正在尝试执行的操作...

Answer 2

在这里，我们会这样做：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, '');
..将删除不需要的报价。（参见正则表达式中添加的|['"]）

另外，我删除了所有不必要的.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，谷歌Chrome 5，Opera 10.60，Safari 4.0.5上测试并完美运行。这种感觉让我觉得它也可以在其他浏览器上运行。

编辑：

实际上，我认为有更简单的解决方案。我明天回家时会检查它们。

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

2 个答案:

编辑：