在IE8 jQuery。動畫問題

嘿傢伙，我試圖通過使用jQuery的滾動背景顯示iPhone應用程序的屏幕截圖。我寫的代碼完全適用於FF & Safari，但IE會引發「無效參數」錯誤。在IE8 jQuery。動畫問題

/編輯：我想我會添加什麼IE實際上做失敗時。它跳轉到第二個屏幕截圖並引發錯誤。每個其他瀏覽器的動畫都很流暢，但IE不會動畫，只是跳到第二個屏幕截圖然後引發錯誤。

這裏是我的代碼：

var scrollInterval = 5000; // scroll every 5 seconds 

    // set the default position 
    var current = 1284; 

    var screenScroll = function(){ 
     var imageSize = 1284; 
     var screenshotWidth = 214; 
     current -= screenshotWidth; 

     if (current < screenshotWidth) { 
      current = imageSize; 
     } 

     var bgPos = current + "px top"; 
     $("#screenshotDiv").animate({backgroundPosition:bgPos}, 500); 

    } 

    $(document).ready(function() { 
     //Calls the scrolling function repeatedly 
     var init = setInterval(screenScroll, scrollInterval); 
    });

來源

2010-12-11 Arlen Anderson

我無法使用jQuery在IE8上正常工作。顯然，IE上有一個jQuery背景位置動畫的bug。令人驚喜的是，IE瀏覽器遇到了與其他現代瀏覽器兼容的問題。

不用擔心，我發現了一個修復程序。在包含jQuery之後包含這個腳本，它將解決問題。我試圖找到該插件的官方聯繫，但放棄了找到一個最新的一個，所以我將只發布文件：

/** 
* @author Alexander Farkas 
* v. 1.21 
*/ 

(function($) { 
    if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8 
     var oldCurCSS = jQuery.curCSS; 
     jQuery.curCSS = function(elem, name, force){ 
      if(name === 'background-position'){ 
       name = 'backgroundPosition'; 
      } 
      if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){ 
       return oldCurCSS.apply(this, arguments); 
      } 
      var style = elem.style; 
      if (!force && style && style[ name ]){ 
       return style[ name ]; 
      } 
      return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force); 
     }; 
    } 

    var oldAnim = $.fn.animate; 
    $.fn.animate = function(prop){ 
     if('background-position' in prop){ 
      prop.backgroundPosition = prop['background-position']; 
      delete prop['background-position']; 
     } 
     if('backgroundPosition' in prop){ 
      prop.backgroundPosition = '('+ prop.backgroundPosition; 
     } 
     return oldAnim.apply(this, arguments); 
    }; 

    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]]; 
    } 

    $.fx.step. backgroundPosition = function(fx) { 
     if (!fx.bgPosReady) { 
      var start = $.curCSS(fx.elem,'backgroundPosition'); 

      if(!start){//FF2 no inline-style fallback 
       start = '0px 0px'; 
      } 

      start = toArray(start); 

      fx.start = [start[0],start[2]]; 

      var end = toArray(fx.options.curAnim.backgroundPosition); 
      fx.end = [end[0],end[2]]; 

      fx.unit = [end[1],end[3]]; 
      fx.bgPosReady = true; 
     } 
     //return; 
     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]; 

    }; 
})(jQuery);

代碼現在的作品完美的IE8。我沒有打算在IE7中測試，因爲只有13％的流量來自IE，所以我不打算支持舊版本....太多的頭痛。

來源

2010-12-11 22:21:58

IE需要第二個參數是{時間：500}，對不對？或者那只是慣例？

其實，環顧四周，backgroundPosition是在IE8與頂級使用時折斷：http://reference.sitepoint.com/css/background-position

也許你可以嘗試下呢？

來源

2010-12-11 01:49:59 SilverbackNet

改變我已經用0像素，而不是頂部試過，結果是一樣的 – 2010-12-11 01:54:39

以防萬一，我繼續使用底部，而不是嘗試。它仍然拋出相同的錯誤。 – 2010-12-11 06:56:25

關於亞歷山大法卡斯腳本的解決方案的工作原理，但它需要第一個小小的修復（因爲我需要爲了使其工作）。行：

var end = toArray(fx.options.curAnim.backgroundPosition);

在

var end = toArray(fx.end);

來源

2013-04-16 14:17:07

在IE8 jQuery。動畫問題

回答

相關問題