JQuery Fade Element não mostra elementos estilizados 'Visibilidade: Hidden'
-
19-09-2019 - |
Pergunta
Eu tenho um monte de miniaturas que estou carregando com um estilo de visibility: hidden;
para que todos mantenham seus layouts corretos. Uma vez que a página está totalmente carregada, tenho uma função jQuery que os desaparece. Isso funcionou quando o estilo deles foi definido como display: none;
Mas, obviamente, o layout estragou tudo. Alguma sugestão?
Aqui está a linha de desbotamento:
$('.littleme').fadeIn('slow');
Solução
Adicione algumas chamadas à cadeia assim:
$('.littleme').css('visibility','visible').hide().fadeIn('slow');
Isso vai mudar para display:none
Para 1 quadro antes de desaparecer, ocupando a área novamente.
Outras dicas
tente usar a opacidade e animate()
:
$('.littleme').css('opacity',0).animate({opacity:1}, 1000);
<span style="opacity:0;">I'm Hidden</span>
Mostrar : $('span').fadeTo(1000,1)
Esconder : $('span').fadeTo(1000,0)
O espaço é preservado no layout DOM
Você não pode usar o Fadeto (duração, valor)? Certamente dessa maneira você pode desaparecer para 0 e 1, para que você não esteja afetando o fluxo de documentos ...
Tente combinar para o elemento oculto?
$ (". LittleMe: Hidden"). Fadein ();