animate - jquery IE Fadein y Fadeout Opacity

jquery show effects

Question

Estoy obteniendo este problema extraño en IE con una superposición de CSS. Estoy solicitando una caja de luz. Básicamente, uso fadein y fadeout para jquery: el problema es que todo funciona bien, EXCEPTO en IE .

En IE - No obtengo fadein - sino que va directo al fondo de opacidad.

En fadeout, elimina la "opacidad" durante <1 segundo y convierte la página en "color sólido" antes de eliminar la superposición.

¿Alguien sabe cómo solucionar este error? Es realmente molesto. Estoy usando todos los filtros correctos, etc. ¿Es solo el fadein y fadeout en IE?

Answer 1

@LoveMeSomeCode (No puedo responder directamente a tu publicación ya que stackoverflow aparentemente cree que necesito X cantidad de reputación porque puedo responder al mensaje de alguien, ¿por qué?!?!) Creo que esto se debe a una característica realmente mala que viene con IE8 ". vista de compatibilidad "(sí, incluso más lamer que el modo en sí).

Noté que la gente estaba teniendo todo tipo de comportamiento extraño cuando veía el sitio web que desarrollé en el trabajo (cuando estaba en IE). Después de algunos juegos, descubrí que IE8 tiene una configuración que OUT-OF-THE-BOX establece todas las páginas locales para mostrar en la vista de compatibilidad. Independientemente de la declaración de su documento o de cuán estricto sea su marcado, IE8 utilizará la vista de compatibilidad para todas las páginas de la intranet (y supongo que el servidor local es el mismo).

Haga clic en Herramientas> Configuración de vista de compatibilidad> Desmarque la casilla que dice "Mostrar sitios de intranet en la Vista de compatibilidad"

¿Por qué demonios esto está habilitado por defecto? No tengo ni idea, pero ha causado muchas molestias al aislar y luego decirle a la gente que lo arregle.

Answer 2

Aquí hay otra solución posible a este problema ... jQuery supuestamente tiene algunos problemas (antes de 1.4?) Con la detección de opacidad establecida a través de CSS. Parece que no tiene problemas si configura la opacidad de los elementos usando jQuery antes de animar la opacidad (fadeIn, fadeOut, fadeTo y animate). Al igual que en, puede establecer la opacidad mediante CSS para los navegadores que lo soportan y luego también apilar sobre la configuración la opacidad usando jQuery y luego debe funcionar correctamente en IE. Este es también el caso para mostrar ninguno.

Ejemplo:

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

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

Answer 3

Difícil de decir sin código exacto, pero sé que IE tiene problemas para aplicar fade en los elementos con la position: relative así que si fuera tú, comprobaría si los elementos que intentas atenuar, ya sea directamente o por medio de sus padres, tienen position: relative aplicado . Espero eso ayude.

Answer 4

En la situación en que observé este problema, pude arreglarlo parcialmente usando el método descrito por @Erwinus. El uso de esa técnica hizo que el halo fuera menos feo, pero aún se podía ver un aura negra extraña.

Pude aplicar un fondo a la imagen en sí,

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

Y esto solucionó el problema perfectamente. Lo pegué en mi archivo iefix.css que se incluye a través de comentarios condicionales. No requería HTML adicional y proporcionaba un efecto de desvanecimiento aún más agradable que la otra solución.

Obviamente, esta no sería necesariamente la solución para todos los casos, pero fue viable para el mío y funcionó bien.

Answer 5

Ok, tuve problemas con esto y ninguna de las soluciones que encontré en línea funcionó. Me estaba volviendo loco porque si miras el sitio W3C: http://www.w3schools.com/Css/css_image_transparency.asp , funcionó en IE8. Pero lo copio en mi entorno de desarrollo, pero no.

Tenía este código:

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

Y este marcado:

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

Funcionó en FF, Chrome, todo, PERO IE8.

Lo que finalmente nos dimos cuenta fue que IE8 no aplicaba el script cuando se ejecutaba en localhost. Copié este código a un servidor web y ¡BAM !, funciona perfectamente. No sé por qué IE8 hace esto, pero lo veo como una razón más para que los desarrolladores no les guste IE.

Quizás sea solo yo.

Answer 6

También tiene problemas al usar este navegador basura.

También puede verificar si el navegador es IE en lugar de utilizar .animate({opacity:0}) tendrá que usar .animate({opacity:''hide''}) .

Answer 7

Tuve el mismo problema en IE8. Establecer la opacidad del DIV en JavaScript antes de llamar a fadeIn () resolvió el problema:

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

Esto estaba usando solo un DIV simple, no un PNG transparente.

Answer 8

tal vez sea esta una buena solución para ti (para mí lo es). La solución es simple pero efectiva (y muy agradable). IE tiene problemas con la transparencia alfa cuando el fondo de su padre no tiene color (transparencia total).

Lo que hacemos aquí (ver ejemplo a continuación) es agregar un div primero que es casi transparente (transparente para el ojo). Como es el primer div dentro del lienzo / contenedor (=> un div por ejemplo) y se coloca absoluto, todo el contenido después de este div se colocará encima del primer div, por lo que este se convierte en el fondo de todo el otro contenido dentro de este lienzo.

Debido a que ahora hay un fondo, IE no muestra puntos negros desagradables (píxeles) o áreas negras al desvanecerse o atenuarse (al cambiar la opacidad) o cuando establece la opacidad del lienzo en un valor inferior a 100.

Cómo - ejemplo con una imagen 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>

Para fundir o atenuar la imagen con jQuery:

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

Esto también es posible:

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

¡Eso es!

Lo bueno es que esta solución también funciona con VML / SVG (Raphael) u otro contenido que tenga transparencia alfa. Además, no tiene que cambiar / piratear su código JS, porque este "truco" no afecta a otros navegadores.

Espero eso ayude.