La opacidad de animación no funciona correctamente en IE

Question

Estoy tratando de usar animate() para cambiar la altura y la opacidad de div. El div tiene un fondo de imagen en CSS. Funciona bien en Firefox y Safari, pero cuando lo pruebo en IE, el fondo se elimina. Este es mi código:

if (jQuery.support.opacity) { 
    jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300}); 
} else { 
    jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300}); 
} 

¿Cómo puedo solucionar este problema?

Answer 1

Tenía la impresión de que jQuery hizo todo el soporte de opacidad para usted. ¿Funciona esto para todos los navegadores?

$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300}); 

Answer 2

¿Utiliza alguna secuencia de comandos pngfix? ese puede ser el culpable.

Answer 3

Puede utilizar fadeTo para lograr lo que quiere hacer:

$('#list_box').fadeTo("slow", 0.33); 

fadeIn y fadeOut hacer transiciones de 0 a 100%, pero lo anterior le permitirá desvanecen a una opacidad arbitraria.

(http://docs.jquery.com/Effects/fadeTo#speedopacitycallback)

Answer 4

He tenido el mismo problema. Me tropecé en la respuesta, cuando me puse la opacidad al 40%:

$('#list_box').stop().animate({opacity: '.4'},"slow"); 

Noté que dio el salto opacidad al 100%, a continuación, animar hasta el 40%. Eureka.

lo tanto, ahora establece explícitamente la opacidad a cero antes de la animación:

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow"); 

que anima sin problemas, excepto el texto todavía se ve horrible en IE.

Para limpiar el texto, eliminé la opacidad del CSS en IE después de la animación. Esto parece aclarar el texto bastante en IE6 e IE8.

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){ 
    //remove the opacity in IE 
    jQuery.each(jQuery.browser, function(i) { 
     if($.browser.msie){ 
      $('#list_box').css({opacity:''}); 
     } 
    }); 
}); 

Lo estoy probando en una Mac en Parallels, en IE6 e IE8. Todo parece funcionar bien en el lado de Mac.

Answer 5

No es necesario escribir un controlador especial para IE, jQuery lo hace todo para usted detrás de las escenas:

jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300); 

Sin embargo: Si usted tiene un PNG de 24 bits transparente su imagen de fondo que está desapareciendo, debe tener en cuenta que no puede combinar filter: alpha (que jQuery utiliza correctamente entre bastidores en IE) con un PNG transparente de 24 bits en IE7 o IE8.Creo que la única manera de evitarlo es establecer un color de fondo (que no sea transparent) en el objeto sobre el que está utilizando filter: alpha

Cómo probar: Basta con establecer un color de fondo en #list_box a un color sólido, añadiendo algo como esto a tu CSS después de su declaración background-image:

#list_box { background-color: red } 

Si la imagen de fondo se mantiene, y su #list_box anima correctamente (excepto para el fondo horrible) usted sabe cuál es el problema y tendrá que f ind otra forma de lograr lo que quieres.

Answer 6

En jQuery, una vez que el div está configurado para tener opacidad: 0 (en navegadores compatibles con estándares) o filtro: alfa (opacidad = 0) en IE, puede usar

$('#div').animate({opacity:1},100);

Ya que jQuery admite compatibilidad con navegadores cruzados, terminas animando el filtro a través de IE, entonces hay posibilidades de que jQuery intente admitir IE y el conflicto se produce cuando jQuery activa el cambio de opacidad x2.

Espero que esto ayude. He tenido el mismo problema, además de problemas extraños con IE no ser capaz de manejar el desvanecimiento en una pila div con múltiples elementos.

Answer 7

Muy (muy) tarde con la respuesta, pero como esto está en la parte superior de Google cuando busqué ayuda con un problema de jquery v animate en IE8, pensé que lo publicaría aquí.

Mi problema estaba relacionado con el error hasLayout en IE, y agregando "display: inline-block" al elemento que se va a solucionar solucionó el problema.

Answer 8

Ok esto podría ayudar un poco, he encontrado una solución en este sitio sobre el problema exacto http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

en conclusión, el problema general es el filtro de opacidad en IE, en su caso concreto no hay mucho que puede hacer, pensó

pero en caso de que se desvanezca hacia adentro y hacia afuera, evite el problema con una imagen de fondo png solo tiene que quitar el atributo de filtro que la función jQuery agregó cuando termina el fx. Sólo tiene que utilizar una función de devolución de llamada, algo así como que lo haría:

$('#node').fadeOut('slow', function() {<br/> 
    this.style.removeAttribute('filter');<br/> 
}); 

en caso de que los selectores devuelve más de una, utilice el cada función, algo como esto:

$('.nodes').fadeIn('fast', 
    function() { 
     $(this).each (
      function(idx,el) { 
       el.style.removeAttribute('filter'); 
      } 
     ); 
    } 
); 

Answer 9

que tenía el mismo tipo de problema con esto:

$('#nav li').hover(function() { 
$(this).stop().animate({opacity: '0.4'}, 'slow'); 
}, 
function() { 
$(this).stop().animate({opacity: '1'}, 'slow'); 
}); 

Simplemente agregué el flotador: izquierda; al #nav li css y solucionó el problema.

Answer 10

he tenido el mismo problema con el IE 7, el problema era un coma final después de la propiedad opacidad

jQuery(this).animate({opacity:1.00,},800); 

Tiene que ser:

jQuery(this).animate({opacity:1.00},800); 

Answer 11

he encontrado una solución eso funcionó para mí: position:inline-block; Esto funciona para la opacidad del texto que se desvanece, no lo he intentado con una imagen de fondo de CSS. Tal vez ayude de todos modos.

Solo quería informar un pequeño error con el método fadeTo en Internet Explorer 8. No funcionará si su elemento como "pantalla" está configurado en "en línea". Descubrí que debes ponerlo en "bloque en línea" y luego funciona perfectamente. No hay nada sobre esto en la web y no es la primera vez que tengo este problema.

No sabe si es la forma correcta para informar de esta cuestión, pero estoy seguro de que alguien va a leer este post :)

encontrado en http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

Answer 12

mismo problema con IE8. Agregando "display: inline-block" al .hover2 en el problema solucionado.

$(function() { 

     $(".hover1").css("opacity","1.0"); // Default set opacity to 1.0 

     // On Mouse over 
     $(".hover1").hover( 
          function() { 

             // SET OPACITY TO 15% 
             $("span.hover2").stop().animate({opacity: 0.15}, 1200); 
             }, 

             // ON MOUSE OUT 
          function() { 

             // SET OPACITY BACK TO 100% 
             $("span.hover2").stop().animate({opacity: 1.0}, 1200); 
             } 
         ); 
       } 
    ); 

Answer 13

Noté que el problema fue causado por la posición: relativa del contenedor. Si "cambiar" a la animación de opacidad absoluta funcionará.

Answer 14

Lo resuelto con la adición de un fondo opaco para el elemento animado:

CSS:

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 195px; 
    height: 274px; 
    cursor: pointer; 
    background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */ 
    opacity: 0; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ 
    filter: alpha(opacity=0); /* IE6-7 */  
    zoom: 1; 
} 

JS:

$('.overlay').hover(
    function(){ 
     $(this).animate({'opacity': 0.7}, 300); 
    }, 
    function(){ 
     $(this).animate({'opacity': 0}, 250); 
    } 
); 

Obras para IE7-8

Espero que esto ayude a alguien;)