FadeIn simple y visibilidad en jQuery

Question

Estoy tratando de cambiar la propiedad css visibility de un div a visible con una transición jQuery .fadeIn().

Aquí está mi código:

$('a').click(function() { 
    $('#test').fadeIn('slow', function() { 
    $(this).css('visibility','visible'); 
    }); 
});​ 

y el violín: http://jsfiddle.net/np6r7/

Answer 1

no se pueden animar visibility. fadein está desactivado display:none;, por lo que debería ser el estado inicial de #test a través de CSS. Si necesita mantener el diseño, puede intentar ajustar la prueba en un div que especifique la altura y/o el ancho que necesita.

Answer 2

En realidad, me gustó la respuesta de davidaam. Me gustaría hacer una ligera modificación:

$('#test').css('visibility','visible').hide().fadeIn("slow"); 

Answer 3

También es posible usar la opacidad CSS combinado con fadeIn de jQuery para lograr lo mismo.

En lugar de utilizar la visibilidad en su CSS, utilice opacity: 0; A continuación, utilice jQuery FadeTo para aumentar la opacidad al 100%:

$('#test').fadeTo('slow', 1);

Esto conservará el posicionamiento como la visibilidad lo hace, sin embargo, es importante tener en cuenta que opacity: 0 responde a eventos como hacer clic y presionar teclas, así como participar en el taborder. Además, también he leído que un uso responsable de visibility: hidden en lugar de display: none es mejor para SEO, pero no estoy seguro de cómo esto se aplica a opacity: 0.

jsFiddle: http://jsfiddle.net/np6r7/15/