2011-05-18 10 views
8

cuando me puse la opacidad a 0 en css() la siguiente fadeIn() no funcionacss() y opacidad .. siguiente fadeIn() no funciona

si fijo opacidad a 1 se muestra el elemento loader pero no habrá, por supuesto, no ser cualquier decoloración en ..

loader.css({ 
     top : ($(window).height() - loader.height())/2+'px', 
     left : ($(window).width() - loader.width())/2+'px', 
     opacity : 0 
    }) 
    .fadeIn(1000); 

si uso display: none funciona !?

loader.css({ 
     top : ($(window).height() - loader.height())/2+'px', 
     left : ($(window).width() - loader.width())/2+'px', 
     display : 'none' 
    }) 
    .fadeIn(1000); 
+0

¿Cuál es la marca con la que está trabajando? ¿Qué tal un jsFiddle? –

Respuesta

13

Intente utilizar fadeTo()

loader.css({ 
    top : ($(window).height() - loader.height())/2+'px', 
    left : ($(window).width() - loader.width())/2+'px', 
    opacity : 0 
}) 
.fadeTo(1000, 1); 
+0

Esto resuelve el problema, y ​​si el OP quiere usar 'fadeIn()', oculte el contenido a través de 'display: none' y esté ordenado (según lo editado por el OP lo conoce ya). – jackJoe

4

.fadein() se utiliza para mostrar un elemento oculto, no sé si funciona con una opacidad a 0. En lugar de opacidad: 0 pantalla intento: ninguno

edición: parece que dado cuenta de esto antes de mi post pasó por

9

el problema es que sólo lo hace jQuery funciones como fadeIn si el elemen t no es visible. jQuery internamente hace $(this).is(':hidden') para decidir si ejecutar la animación o no. El filtro hidden claramente no verifica si la opacidad es 0; Probablemente debería.

La solución obvia es configurar display: none como lo tiene, o llamar al hide() antes de llamar al fadeIn() si está seguro de que el elemento está oculto.


La otra solución es redefinir el filtro hidden para comprobar opacidad:

jQuery.expr.filters.hidden = function(elem) { 
    var width = elem.offsetWidth, 
     height = elem.offsetHeight; 

    return (width === 0 && height === 0) || (!jQuery.support.reliableHiddenOffsets && (elem.style.display || jQuery.css(elem, "display")) === "none" || (elem.style.opacity || jQuery.css(elem, 'opacity')) === "0"); 
}; 

Correr .is(':hidden') ahora comprobará para la opacidad. See jsFiddle.


me he presentado a bug report para cubrir este tema.