IE8의 jQuery .animate 문제

Question

안녕 얘들 아, 나는 jQuery를 사용하여 스크롤 배경을 통해 iPhone 앱의 스크린 샷을 표시하려고 시도하고있다. 필자가 작성한 코드는 FF & Safari에서 완벽하게 작동하지만 IE는 "잘못된 인수"오류를 발생시킵니다.

/편집 : 나는 그것이 실패 할 때 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); 
    }); 

Answer 1

jQuery를 사용하여 IE8에서이 작업을 수행하지 못했습니다. IE에 jQuery 배경 위치 애니메이션이있는 버그가있는 것 같습니다. 놀람, 놀람 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에서 완벽하게 작동합니다. 나는 트래픽에서 13 % 만 IE에서 나왔기 때문에 IE7에서 테스트하는 데 신경 쓰지 않았으므로 이전 버전을 지원하지 않아도됩니다 .... 너무 많은 두통.

Answer 2

IE는 {500 시간}로 두 번째 인수가 필요합니다

여기 내 코드입니까? 아니면 그냥 컨벤션인가?

최고와 함께 사용할 때

가 실제로 둘러보고, backgroundPosition는 IE8에 고장 : http://reference.sitepoint.com/css/background-position

은 아마 당신은 바닥을 대신 시도 할 수 있습니다?

Answer 3

알렉산더 Farkas의 스크립트에 관한 해결책이 있지만 작동하려면 먼저 약간의 수정이 필요합니다. 선 :

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

내가 대신 상단의 0 픽셀을 사용하려고했습니다

var end = toArray(fx.end);