Animazione per aggiungere elementi DOM con jQuery

Question

Al momento sto aggiungendo elementi a una pagina su un evento click utilizzando after. Mi piacerebbe animarlo in qualche modo così i nuovi elementi non appaiono improvvisamente dal nulla.

Non mi preoccupo di quale metodo di animazione viene utilizzato purché mostri all'utente ciò che accade quando fa clic.

Non ho mai usato l'animazione in jQuery e ho trovato solo degli esempi per lavorare con gli elementi DOM esistenti. Quale modello dovrebbe essere usato per animare la creazione di nuovi elementi in jQuery?

Answer 1

Quello che ho fatto in passato è inserire segnaposto-zero a dimensione zero nel punto in cui voglio inserire il mio nuovo elemento.

ho quindi animate che segnaposto per la dimensione che voglio, quindi inserire una versione nascosta dell'elemento voglio mostrare all'interno del segnaposto e dissolvenza in vista.

Una volta che il fade-in è completa I 'scartare' il segnaposto per rimuoverlo, utilizzando il seguente codice:

// Essentially, this does the opposite of jQuery.wrap. Here is an example: 
    // 
    //  jQuery('p').wrap('<div></div>'); 
    //  jQuery('p').parent().unwrap().remove(); 
    // 
    // Note that it is up to you to remove the wrapper-element after its 
    // childNodes have been moved up the DOM 
    jQuery.fn.unwrap = function() { 
     return this.each(function(){ 
      jQuery(this.childNodes).insertBefore(this); 
     }); 
    }; 

Tutte le caratteristiche di animazione jQuery hanno i gestori di 'onComplete' che consentono di kick-off diverso parti dell'animazione una volta completate, quindi non è un compito ingrato per ottenere tutto ciò.

Inoltre, è molto utile mantenere un modello JavaScript di tutti i tuoi elementi invece di affidarsi al DOM-traversal lento e al metodo jQuery .data().

Answer 2

Un semplice fadeIn di solito funziona bene.

Answer 3

Si potrebbe fare qualcosa di simile:

...click(function() { 
    $(...).hide().appendTo(...).fadeIn(); 
} 

Answer 4

provare qualcosa di simile:.

$("selector").hide().fadeIn(1000); 

dove 1000 è la velocità di cui l'elemento può svanire nel metto la pelle() in là partendo dal presupposto che il nuovo elemento DOM è visibile al momento della creazione, non è sicuro che sia necessario o meno. La cosa migliore da fare è mettere un "display: none" sul nuovo elemento quando lo crei e poi usa solo fadeIn().

Ci sono altri effetti che puoi usare anche come slideUp/slideDown, quindi potresti voler esaminare anche quelli.

Answer 5

Si può andare per qualsiasi animazione. Si può andare per un semplice show

$("#element").show("slow") // or "normal" or "fast" 
// or 
$("#element").show(1000) // 1000 milliseconds 

Oppure, come suggerito in precedenza, fadeIn. Ancora una volta puoi decidere la velocità - come in show. Oppure potresti andare per un'animazione personalizzata.

$("#element").animate({ 
    opacity: 1, // Will fade the object in 
    fontSize: "14px", // Will animate the font size too 
}, 1000); // 1000 milliseconds 

Vai here per la documentazione degli effetti jQuery.