l'opacité Animer ne fonctionne pas dans IE ou Opera
-
18-09-2019 - |
Question
J'expérimente avec des plugins jQuery. J'ai ce code à disparaître dans un « lightbox »:
$('#cleverbox')
.css({ opacity:0, visibility:'visible' })
.animate( {opacity:1}, 2000 );
Il fonctionne très bien sur Firefox et Chrome, mais dans IE (7 et 8) et Opera l'élément apparaît juste plutôt que d'être fanée. Il y a un tas de questions similaires sur SO, mais je dois encore trouver une solution qui fonctionne .
Je . Je vais avoir aussi quelques autres problèmes:
- Dans Internet Explorer (7 et 8), la première vignette affiche jamais la lightbox (l'événement
onload
ne se déclenche). - Dans IE7, le code pour corriger le bug de ClearType ne fonctionne pas.
$(this).css( 'opacity', '' )
devrait supprimer le style d'opacité (dans ce cas, la propriété « filtre ») mais il ne le supprime pas. Dans les outils de développement de IE, il a encorestyle="filter: ;"
- Dans Opera, il ne court jamais après avoir chargé une fois. En d'autres termes, si une image est dans le cache du navigateur l'événement
onload
ne se déclenche jamais.
La solution 2
J'ai trouvé un correctif pour le bogue dans Opera, grâce à la communauté Opera. J'ai eu ceci:
var imgLoad = new Image();
imgLoad.src = linkUrl;
imgLoad.onload = function() {
//do some stuff here
}
Cependant, si l'image est dans le cache du navigateur, il ne se déclenche jamais parce que la partie de chargement est avant que la fonction onload. La solution est de déplacer l'affectation de src
sous la fonction onload:
var imgLoad = new Image();
imgLoad.onload = function() {
//do some stuff here
}
imgLoad.src = linkUrl;
Autres conseils
Avez-vous essayé envelopper des valeurs d'opacité dans '
, à savoir $(something).animate({opacity:'1'});
? Fonctionne pour moi à chaque fois.