Aggiungi un elemento con effetto dissolvenza [jQuery]

121

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

Questo non sembra funzionare.

Voglio solo un effetto interessante quando il contenuto viene aggiunto.

Nota: voglio che venga visualizzato solo il nuovo div "blah", non l'intero "mycontent".

— TIMEX
fonte

possibile duplicato di Using fadein and append

— utente

262

$(html).hide().appendTo("#mycontent").fadeIn(1000);

— icktoofay
fonte

1

Voglio che venga visualizzato solo il nuovo div "blah".

— TIMEX

@ TIMEX: Questo è ciò che dovrebbe fare.

— icktoofay

C'è una ragione per cui prima nascondi e poi aggiungi (perché è più veloce impostare uno stile prima di collegarlo al DOM, o qualcosa del genere) o non fa la differenza?

— qwertymk

2

@qwertymk: non c'è un vero motivo. Se i browser rendessero mai il rendering mentre il DOM era ancora in fase di manipolazione (cosa che attualmente nessun browser fa per quanto ne so), non ci sarebbe alcun flash del contenuto prima che iniziasse a dissolversi. Ancora una volta, non molto importante.

— icktoofay

1

@ArthurTarasov: Questo si aggiunge #blaha se stesso, il che non sembra qualcosa che vuoi fare (e immagino sia interpretato come un no-op). Potresti anche lasciare la .appendToparte e usarla $('#mycontent').hide().fadeIn(1000).

— icktoofay

52

Aggiungendo un po 'più di informazioni:

jQuery implementa il "concatenamento di metodi", il che significa che puoi concatenare chiamate di metodo sullo stesso elemento. Nel primo caso:

$("#mycontent").append(html).fadeIn(999);

applicheresti il fadeInin questo caso chiamata all'oggetto che è la destinazione della catena di metodi #mycontent. Non quello che vuoi.

Nella (fantastica) risposta di @ icktoofay hai:

$(html).hide().appendTo("#mycontent").fadeIn(1000);

Questo significa fondamentalmente, crearlo html, impostarlo come nascosto per impostazione predefinita, aggiungerlo #mycontente poi sfumarlo. L'obiettivo della catena di metodi ora è hmtlinvece di #mycontent.

— Pablo Fernandez
fonte

18

Funziona anche questo

$(Your_html).appendTo(".target").hide().fadeIn(300);

Saluti

— Mohd Sakib
fonte

Questo è il modo esteticamente più piacevole per gestire la dissolvenza in entrata poiché consente di comporre completamente l'HTML e di creare le dimensioni di cui ha bisogno prima di dissolversi.

— Antonio Nogueras

0

poiché il fadeIn è una transizione da hide a show, dovrai nascondere l'elemento "html" quando lo aggiungi e poi per mostrarlo.

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(function(){
  return html.hide();
});

$('#blah').fadeIn(999);

Espandi lo snippet

— cristisst
fonte