Почему Firefox 3.6 изменяет свойства jQuery и CSS?

Question

Почему Firefox 3.6 изменяет свойства jQuery и CSS?

Хорошо, конкретнее. У меня есть плагин CrossFade для создания эффекта свечения между двумя изображениями, которые расположены друг над другом. Функция (опубликованная ниже) сделает переход верхнего изображения к непрозрачности 0 через 200 мс при наведении и обратно к непрозрачности 1 через 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

Здесь это будет сделано: 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. И это заставляет меня чувствовать, что это должно работать и в других браузерах.

EDIT:

На самом деле, я думаю, что есть более простые решения. Я проверю их, когда завтра приеду домой.

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 (все, к чему у меня есть доступ на этом компьютере.) Предполагается, что пример делает то, что вы пытаетесь сделать ...