jQuery Image Rotator ne fonctionne pas correctement dans IE seulement

J'ai donc mis en place un rotateur d'image jquery juste pour fondre et masquer un ensemble d'images sur une page. (Remarque, peut ne pas être pertinent mais c'est un site drupal).jQuery Image Rotator ne fonctionne pas correctement dans IE seulement

Cela fonctionne dans tous sauf l'IE. J'ai essayé de comprendre pourquoi cela dure si longtemps et je ne peux pas le trouver. Toute aide serait très appréciée. Voici le code HTML:

Le CSS:

#billboard-blocks .views-field-field-banner-img-fid img { 
    float:right; 
    position:absolute; 
} 
.views-field-field-banner-img-fid div { 
    position:absolute; 
    z-index:100; 
} 
.views-field-field-banner-img-fid div.previous { 
    z-index:101; 
} 
.views-field-field-banner-img-fid div.current { 
    z-index:102; 
}

Et enfin, le jQuery:

$(document).ready(function() { 
$('.views-field-field-banner-img-fid .field-item-0').addClass('current'); 
setInterval("rotateImages()", 5000); 
}); 

function rotateImages() { 
    var oCurPhoto = $(".views-field-field-banner-img-fid .field-item.current"); 
    var oNxtPhoto = oCurPhoto.next(); 

    if(oNxtPhoto.length == 0) { 
     oNxtPhoto = $(".views-field-field-banner-img-fid div.field-item:first"); 
     } 

    oCurPhoto.removeClass('current').addClass('previous'); 
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000, 
     function() { 
      oCurPhoto.removeClass('previous'); 
     }); 
}

Source

2010-06-27 Ryan

quel est exactement le problème? – Sarfraz

Cela aide beaucoup si vous développez "ça ne marche pas" pour que les gens puissent avoir une idée de ce que le problème peut être. – Pointy

Quel est le point de les empiler? Pourquoi ne pas simplement masquer tout sauf le courant? Ou mieux encore, utilisez simplement le plugin de cycle: http://jquery.malsup.com/cycle/? – tvanfosson

Vous ne dites pas ce que le problème est, mais si le problème est que le fondu d'opacité n » Il semblerait que votre image soit un fichier PNG avec un canal alpha, ou peut-être que votre image soit sur un fond avec un canal alpha. La capacité de ces navigateurs à gérer les couches empilées avec des canaux alpha est quelque part entre "limité" et "inexistant".

Source

2010-06-27 11:55:36 Pointy

IE ne prend pas en charge le style CSS "opacity". This blog post a quelques solutions. Ou consultez l'article sur "Une liste à part": Cross-Browser Variable Opacity with PNG: A Real Solution

Source

2010-06-27 12:01:02

jquery normalise cela, 'opacity' fonctionne dans' .css() 'ou' .animate() ', ou dans toute autre fonction de style cross-browser, [regardez ici] (http://github.com/jquery/ jquery/blob/master/src/css.js # L52). –

La cause de ce problème était due à chaque div contenant une image n'a pas une largeur et la hauteur qui lui est assignée. Pour cela IE les affichait comme 0px * 0px pendant qu'il animait. Donc, il semblait juste sauter à l'image suivante parce que l'animation se passait à 0px * 0px.

Source

2010-07-07 03:30:54 Ryan

jQuery Image Rotator ne fonctionne pas correctement dans IE seulement

Répondre

Questions connexes