web-dev-qa-db-fra.com

jquery IE Fadein et Fadeout Opacity

Je reçois ce problème étrange dans IE avec une superposition CSS. Je postule pour une lightbox. Fondamentalement, j’utilise fadein et fadeout pour jquery - le problème est que tout fonctionne bien SAUF dans IE.

Dans IE - je ne reçois pas de fadein - cela va plutôt droit au fond d'opacité.

Sur fondu - supprime "l'opacité" pendant <1 seconde et donne à la page une "couleur unie" avant de supprimer la superposition.

Quelqu'un sait comment résoudre ce bug? C'est vraiment énervant - j'utilise tous les filtres appropriés, etc. C'est juste le fadein et le fadeout dans IE?

jqueryhtmlcssinternet-exploreropacity
26
Tom

J'ai eu le même problème dans IE8. Définir l'opacité de la DIV en JavaScript avant d'appeler fadeIn () a résolu le problème:

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

Cela utilisait juste un simple DIV, pas un PNG transparent.

48
woodstylee

peut-être est-ce une bonne solution pour vous (pour moi ça l'est). La solution est simple mais efficace (et très agréable). IE a des problèmes de transparence alpha lorsque l'arrière-plan de son parent n'a pas de couleur (transparence totale). 

Ce que nous faisons ici (voir exemple ci-dessous) est d’ajouter une première division presque transparente (transparente pour les yeux). Puisqu'il s'agit de la première div du canevas/conteneur (=> une div par exemple) et qu'il est placé en absolu, tout le contenu suivant cette div sera placé au-dessus de la première div, ce qui en fait l'arrière-plan de tout autre contenu. à l'intérieur de cette toile.

Comme il y a maintenant un arrière-plan, IE ne montre pas de points noirs (pixels) ni de zones noires lors du fondu en entrée ou en sortie (lors du changement d'opacité) ou lors du réglage de l'opacité du canevas sur une valeur inférieure à 100.

Comment - exemple avec une image 100x100: 

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

Pour faire apparaître ou masquer l’image avec jQuery:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

Ceci est également possible:

$("myImage").fadeIn("slow");

C'est tout!

Ce qui est bien, c'est que cette solution fonctionne également avec VML/SVG (Raphael) ou un autre contenu à transparence alpha. De plus, vous n'avez pas à changer/pirater votre code JS, car ce "piratage" n'affecte pas les autres navigateurs.

J'espère que ça aide.

6
Erwinus

Difficile à dire sans code exact, mais je sais que IE a des problèmes pour appliquer des fondus sur des éléments avec position: relative, donc si j'étais vous, je vérifierais si les éléments que vous essayez de fondre, directement ou par l'intermédiaire de leurs parents, ont appliqué position: relative . J'espère que ça aide.

0
spirytus

@ LoveMeSomeCode (Je ne peux pas répondre directement à votre message, car stackoverflow pense apparemment que j'ai besoin de beaucoup de réputation car je peux répondre au message de quelqu'un - pourquoi?!?!!) vue de compatibilité "(oui, même plus que le mode lui-même).

J'ai remarqué que les gens affichaient toutes sortes de comportements étranges lorsqu'ils visionnaient le site Web que je développais au travail (sur IE). Après quelques manipulations, j'ai découvert que IE8 possède un paramètre qui OUT-OF-THE-BOX définit toutes les pages locales à afficher dans la vue de compatibilité! Indépendamment de votre déclaration de document ou de la sévérité de votre balisage, IE8 utilisera la vue de compatibilité pour toutes les pages intranet (et je suppose que localhost est identique).

Cliquez sur Outils> Paramètres d'affichage de compatibilité> Décochez la case "Afficher les sites intranet dans l'affichage de compatibilité".

Pourquoi diable cela est-il activé par défaut, je n'en ai aucune idée, mais cela a causé beaucoup de problèmes d'isolement, puis de demande aux gens de réparer.

0
Lev

Voici un autre correctif potentiel à ce problème ... jQuery aurait quelques problèmes (avant la version 1.4?) Pour la détection de l’opacité définie via CSS. Cela ne semble pas poser de problèmes si vous définissez l'opacité des éléments à l'aide de jQuery avant de l'animer (fadeIn, fadeOut, fadeTo et animate). Au fur et à mesure, vous pouvez définir l'opacité à l'aide de CSS pour les navigateurs qui le prennent en charge, puis également superposer l'opacité à l'aide de jQuery. Cette opération devrait alors fonctionner correctement dans IE. C'est également le cas pour display none.

Exemple:

$('#element').css("opacity","0").fadeIn("slow");

Source: http://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_3

0
styol

Dans la situation où j'ai observé ce problème, j'ai pu résoudre partiellement le problème à l'aide de la méthode décrite par @Erwinus. L'utilisation de cette technique rend le halo beaucoup moins laid, mais une étrange aura noire peut encore être vue.

J'ai pu appliquer un fond à l'image elle-même,

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

Et cela corrige parfaitement le problème. Je l'ai collé dans mon fichier iefix.css qui est inclus via des commentaires conditionnels. Il n'a pas besoin de HTML supplémentaire et fournit un effet de fondu encore plus agréable que l'autre solution.

Ce ne serait évidemment pas nécessairement la solution pour tous les cas, mais était viable pour le mien et fonctionnait bien.

0
morewry

Ok, j’ai eu des problèmes avec cela et aucune des solutions que j’ai trouvées en ligne ne marchait… .. Cela me rendait folle parce que si vous regardez le site du W3C: http://www.w3schools.com/Css/css_image_transparency asp , cela a fonctionné dans IE8. Mais je ne le copie pas dans mon environnement de développement. 

J'ai eu ce code:

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

Et ce balisage:

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

Cela a fonctionné dans FF, Chrome, tout MAIS IE8.

Ce que nous avons fini par comprendre, c’est que IE8 n’appliquait pas le script lorsqu’il s’exécutait contre localhost. J'ai copié ce code sur un hébergeur et BAM !, fonctionne parfaitement. Je ne sais pas pourquoi IE8 fait cela, mais je le vois comme une raison supplémentaire pour les développeurs de ne pas aimer IE.

Peut-être que c'est juste moi.

0
LoveMeSomeCode

Avoir également un problème avec ce navigateur indésirable.

Vous pouvez également vérifier que le navigateur est IE au lieu d'utiliser .animate({opacity:0}). Vous devrez utiliser .animate({opacity:'hide'}).

0
Jerome