Problèmes jQuery .animate dans IE8

Question

Hé les gars, je tente d'afficher des captures d'écran d'une application iPhone via un fond de défilement en utilisant jQuery. Le code que j'ai écrit fonctionne parfaitement dans FF & Safari, mais IE lance une erreur "Argument invalide".

/EDIT: J'ai pensé que j'ajouterais ce que fait réellement IE quand il échoue. Il saute à la deuxième capture d'écran et lance l'erreur. Tous les autres navigateurs s'animent en douceur, mais IE ne s'anime pas, il saute juste à la seconde capture d'écran puis lance l'erreur.

Voici mon code:

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

Je n'ai pas réussi à faire fonctionner IE8 avec jQuery. Apparemment, il y a un bug avec les animations de position d'arrière-plan jQuery sur IE. Surprise, surprise IE a des problèmes avec quelque chose qui fonctionne sur tous les autres navigateurs modernes.

Ne vous inquiétez pas, j'ai trouvé une solution. Inclus ce script après avoir inclus jQuery et cela résoudra le problème. J'ai essayé de trouver un lien officiel au plugin, mais a renoncé à trouver une mise à jour d'un donc je vais juste poster le fichier:

/** 
* @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); 

Le code fonctionne maintenant parfaitement dans IE8. Je n'ai pas pris la peine de tester IE7 car seulement 13% de mon trafic provient d'IE, donc je ne prendrai pas la peine de supporter les anciennes versions .... Trop de mal de tête.

Answer 2

IE exige que le second argument pour être {durée: 500}, non? Ou est-ce juste une convention?

En fait, en regardant autour, backgroundPosition est cassé sur IE8 lorsqu'il est utilisé avec le dessus: http://reference.sitepoint.com/css/background-position

Peut-être que vous pouvez essayer en bas à la place?

Answer 3

La solution concernant le script par Alexander Farkas fonctionne mais il faut d'abord un petit correctif (comme j'avais besoin pour le faire fonctionner). Ligne:

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

doit être changé dans

var end = toArray(fx.end);