Come dissolvenza da visualizzare: inline-block

98

Nella mia pagina ho un gruppo (circa 30) nodi dom che dovrebbero essere aggiunti invisibili e dissolvenza in apertura quando sono completamente caricati.
Gli elementi hanno bisogno di una visualizzazione: inline-block style.

Vorrei usare la funzione jquery .fadeIn (). Ciò richiede che l'elemento inizialmente abbia una visualizzazione: nessuna; regola per nasconderlo inizialmente. Dopo fadeIn () gli elementi fuori rotta hanno la visualizzazione predefinita: inherit;

Come posso utilizzare la funzionalità di dissolvenza con un valore di visualizzazione diverso da inherit?

jquery fade

— Boris Callens
fonte

39

È possibile utilizzare la funzione di animazione di jQuery per modificare da soli l'opacità, lasciando inalterata la visualizzazione.

— philnash
fonte

Mi piace di più questa soluzione, tiene il CSS fuori dal mio JS.

— joshuadelange

14

@joshuadelange non proprio, l'opacità è anche CSS

— Roy

+1 per concentrare il processo ingegneristico di mostrare / nascondere gli elementi su dove dovrebbero essere.

— klewis

233

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

— MakuraYami
fonte

5

Questa è sicuramente la risposta migliore.

— Jason

25

Bella risposta! Ancora meglio, puoi lasciarlo vuoto per impostare di default quello che hai nel tuo CSS:$("div").fadeIn().css("display","");

— Brandon Durham

1

Questa dovrebbe davvero essere la risposta accettata; la risposta accettata esistente è più un commento.

— Barba

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });per essere sicuri che la visualizzazione: inline-block venga eseguita quando il fadein è terminato

— Simon,

non funziona per me ... applicato su un div con uno stile di visualizzazione iniziale impostato su nessuno utilizzando una classe. Ispezionando l'elemento vedo che per alcuni millisecondi, subito dopo aver chiamato fadeIn, ha un blocco in linea nel suo stile, quindi lo stile è impostato su blocco. con il suggerimento di Simon l'effetto non è piacevole, in quanto durante il fadeIn l'elemento viene visualizzato come blocco

— Giox

11

Solo per rimpolpare la buona idea di Phil, ecco un fadeIn () che carica le dissolvenze in ogni elemento con la classe .faded a sua volta, convertita in animate ():

Vecchio:

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

Nuovo:

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

Spero che questo aiuti un altro newb di jQuery come me :) Se c'è un modo migliore per farlo, per favore faccelo sapere!

— Mero sviluppo
fonte

9

La risposta di Makura non ha funzionato per me, quindi la mia soluzione è stata

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

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

hidesi applica immediatamente display: nonema prima salva il valore di visualizzazione corrente nella cache dei dati di jQuery che verrà ripristinato dalle successive chiamate di animazione.

Quindi gli divinizi definiti staticamente come display: none. Quindi viene impostato su inline-blocke immediatamente nascosto solo per essere sfumato di nuovoinline-block

— Clodoaldo Neto
fonte

2

Secondo i documenti di jQuery per .show(),

Se un elemento ha un valore di visualizzazione inline, viene nascosto e mostrato, verrà nuovamente visualizzato inline.

Quindi la mia soluzione a questo problema era applicare una regola CSS a una visualizzazione di classe: inline-block sull'elemento, quindi ho aggiunto un'altra classe chiamata "hide" che applica la visualizzazione: none; Quando sono .show()sull'elemento, è mostrato in linea.

— amurrell
fonte

Presumo che questo dovrebbe funzionare anche quando imposti #el{display:inline-block;display:none;}e poi esegui $('#el').fadeIn();ottieni inline-block. Ma non è così.

— Fanky

0

Funziona anche con display:nonepreset di css. Uso

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

(e anche $('#element').fadeOut().removeClass('displaytype');)

con configurazione in CSS:

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

Considero questa una soluzione alternativa poiché credo che fadeIn()dovrebbe funzionare in modo da rimuovere solo l'ultima regola, display:nonequando impostata su, #element{display:inline-block;display:none;}ma rimuove entrambe in modo errato.

— Fanky
fonte