L'animation de l'opacité ne fonctionne pas dans IE ou Opera

J'expérimente les plugins jQuery. J'ai ce code à disparaître dans un « lightbox ».L'animation de l'opacité ne fonctionne pas dans IE ou Opera

$('#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 dans Il y a un certain tas de questions similaires sur SO, mais je dois encore trouver une solution qui fonctionne. Je possède un example page. Je suis aussi avoir 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 bogue ClearType ne fonctionne pas. $(this).css('opacity', '') devrait supprimer le style d'opacité (dans ce cas, la propriété 'filter') mais il ne le supprime pas. Dans les outils de développement d'IE, il a toujours style="filter: ;"
Dans Opera, il ne court jamais après qu'il a été chargé une fois. En d'autres termes, si une image se trouve dans le cache du navigateur, l'événement onload ne se déclenche jamais.

Source

2010-01-04 DisgruntledGoat

Ce que vous savez probablement déjà: IE ne prend pas en charge l'opacité CSS; Opera peut le masquer derrière un préfixe personnalisé car l'opacité CSS est toujours dans le brouillon CSS3, pas une spécification finale. Je ne sais pas si JQuery essaie de les émuler. IE désactivera ClearType si une opacité est définie via un filtre DX. – EricLaw

jQuery surmonte les compatibilités entre navigateurs comme celle-ci (c'est l'une des principales raisons de l'utiliser) - Opera supporte très bien l'opacité, et IE utilise la propriété filter. Comme pour ClearType, le code ci-dessus est destiné à corriger ce bug, ce qu'il fait dans IE8, mais pas 7. – DisgruntledGoat

J'ai trouvé un correctif pour le bug dans Opera, grâce à la communauté d'opéra. 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 consiste à déplacer l'affectation src sous la fonction onload:

var imgLoad = new Image(); 
imgLoad.onload = function() { 
    //do some stuff here 
} 
imgLoad.src = linkUrl;

Source

2010-02-17 14:57:04 DisgruntledGoat

Avez-vous essayé envelopper des valeurs d'opacité dans ', à savoir $(something).animate({opacity:'1'});? Fonctionne pour moi à chaque fois.

Source

2010-02-09 15:02:56

L'animation de l'opacité ne fonctionne pas dans IE ou Opera

Répondre

Questions connexes