Como esmaecer para exibir: bloco embutido

98

Na minha página, eu tenho um monte (cerca de 30) nós dom que devem ser adicionados de forma invisível e desaparecer quando estiverem totalmente carregados.
Os elementos precisam de um estilo display: inline-block.

Eu gostaria de usar a função jquery .fadeIn (). Isso requer que o elemento inicialmente tenha um display: none; regra para ocultá-lo inicialmente. Após o fadeIn (), os elementos fora do curso têm a exibição padrão: herdar;

Como posso usar a funcionalidade de esmaecimento com um valor de exibição diferente de herdar?

jquery fade

— Boris Callens
fonte

39

Você pode usar a função animar do jQuery para alterar a opacidade por conta própria, deixando a tela inalterada.

— philnash
fonte

Eu gosto mais dessa solução, mantém o CSS fora do meu JS.

— joshuadelange

14

@joshuadelange não realmente, opacidade também é CSS

— Roy

+1 para focar o processo de engenharia de mostrar / esconder elementos onde deveriam estar.

— klewis

233

$("div").fadeIn().css("display","inline-block");

— MakuraYami
fonte

5

Esta é definitivamente a melhor resposta.

— Jason

25

Ótima resposta! Melhor ainda, você pode deixar em branco para usar como padrão o que estiver em seu CSS:$("div").fadeIn().css("display","");

— Brandon Durham

1

Essa realmente deveria ser a resposta aceita; a resposta aceita existente é mais um comentário.

— Sinister Beard

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });para ter certeza de que display: inline-block é feito quando o fadein terminar

— Simon

não funciona para mim ... aplicado em um div com um estilo de exibição inicial definido como nenhum usando uma classe. Inspecionando o elemento, vejo que, por alguns milissegundos, logo após chamar o fadeIn, ele tem bloco embutido em seu estilo, então o estilo é definido como bloco. com a sugestão de Simon o efeito não é bom, pois durante o fadeIn o elemento é exibido como um bloco

— Giox

11

Apenas para concretizar a boa ideia de Phil, aqui está um fadeIn () que carrega fades em cada elemento com a classe. Desbotada por sua vez, convertida em animate ():

Velho:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

Novo:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

Espero que ajude outro newb da jQuery como eu :) Se houver uma maneira melhor de fazer isso, diga-nos!

— Mero Desenvolvimento
fonte

9

A resposta de Makura não funcionou para mim, então minha solução foi

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hideaplica-se imediatamente, display: nonemas antes disso, ele salva o valor de exibição atual no cache de dados jQuery, que será restaurado pelas chamadas de animação subsequentes.

Portanto, o divcomeça definido estaticamente como display: none. Em seguida, é definido como inline-blocke imediatamente oculto apenas para ser desbotado de volta parainline-block

— Clodoaldo Neto
fonte

2

De acordo com os documentos do jQuery para .show(),

Se um elemento tiver um valor de exibição embutido, então estiver oculto e mostrado, ele será novamente exibido embutido.

Portanto, minha solução para esse problema foi aplicar uma regra css a uma exibição de classe: bloco embutido no elemento, então adicionei outra classe chamada "ocultar" que aplica exibição: nenhum; Quando eu .show()no elemento, ele mostrou inline.

— Amurrell
fonte

Eu presumiria que isso também funcionaria quando você definir #el{display:inline-block;display:none;}e executar $('#el').fadeIn();get inline-block. Mas isso não acontece.

— Fanky

0

Isso funciona mesmo com display:nonepredefinido por css. Usar

$('#element').fadeIn().addClass('displaytype');

(e também $('#element').fadeOut().removeClass('displaytype');)

com configuração em CSS:

#element.displaytype{display:inline-block;}

Considero isso uma solução alternativa, pois acredito que fadeIn()deva funcionar de forma que apenas remova a última regra - display:nonequando definida como, #element{display:inline-block;display:none;}mas está removendo ambas com defeito.

— Fanky
fonte