後臺位置的動畫在Firefox

不工作，我的工作在這裏wesbsite：http://www.benjaminpotter.org/portfolio2/後臺位置的動畫在Firefox

看看加載飛濺，它看起來都不錯，但不能在Firefox。你知道爲什麼在jquery中動畫的背景位置在Firefox中不起作用嗎？看看附在其上的腳本，稱爲動畫here。

2011-12-04 Ben Potter

如dzejkej另外，對於背景位置獨立的值不是標準的一部分，而不是Firefox支持。作爲對jQuery animate() page指出：

所有動畫屬性應該動畫到一個單一的數值

這意味着，background-position沒有資格，因爲它需要兩個值，X位置和Y位置。

您將不得不使用動畫插件。不幸的是，此刻的jQuery插件網站已關閉，所以我已經提供了在Firefox這裏工作的版本：

/** jquery.bgpos.js 
* @author Alexander Farkas 
* v. 1.02 
*/ 
(function($) { 
    $.extend($.fx.step,{ 
     backgroundPosition: function(fx) { 
      if (fx.state === 0 && typeof fx.end == 'string') { 
       var start = $.curCSS(fx.elem,'backgroundPosition'); 
       start = toArray(start); 
       fx.start = [start[0],start[2]]; 
       var end = toArray(fx.end); 
       fx.end = [end[0],end[2]]; 
       fx.unit = [end[1],end[3]]; 
      } 
      var nowPosX = []; 
      nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 
      nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 
      fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; 

      function toArray(strg){ 
       strg = strg.replace(/left|top/g,'0px'); 
       strg = strg.replace(/right|bottom/g,'100%'); 
       strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); 
       var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 
       return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; 
      } 
     } 
    }); 
})(jQuery);

請參閱this page關於它的使用參考。

來源

2011-12-04 21:46:05 rossipedia

background-position-x是非標準的CSS屬性，它不受Firefox的支持。

參見：

來源

2011-12-04 21:43:31 kubetz

我得到了我更好的和簡單的解決方案工作

首先安裝jQuery的遷移

https://github.com/jquery/jquery-migrate/#readme

的$ .browser屬性允許你的目標，你想你的樣式應用到

瀏覽器

在這種情況下，可以將背景位置更改爲屬性支持backgroundPosition

個可用標誌是 - webkit的
- 狩獵 - 歌劇 - MSIE（對於IE） - 用於IE或Firefox

if ($.browser.msie || $.browser.mozilla) { 
      $(".element").css('backgroundPosition', position + "px 0");     
}

Mozilla的

示例鉻

if ($.browser.webkit) { 
      $(".element").css('backgroundPosition', position + "px 0");     
}

來源

2014-12-11 05:26:24

後臺位置的動畫在Firefox

回答

相關問題