Animación para añadir elementos DOM con jQuery

Question

En el momento que estoy añadiendo elementos a una página en un evento click usando after. Me gustaría animar esto de alguna manera para que los nuevos elementos no aparezcan de repente de la nada.

No me molesta lo que el método de animación se utiliza siempre que muestra al usuario lo que está sucediendo cuando se haga clic.

Nunca antes he usado animación en jQuery y solo he encontrado ejemplos para trabajar con elementos DOM existentes. ¿Qué patrón se debe usar para animar la creación de nuevos elementos en jQuery?

Answer 1

Lo que he hecho en el pasado es insertar a tamaño cero marcador de posición-divs en el punto donde quiero insertar mi nuevo elemento.

A continuación, animo ese marcador de posición al tamaño que quiero, luego inserto una versión oculta del elemento que quiero mostrar dentro del marcador de posición y la atenúo en la vista.

Una vez que el fundido de entrada es completa I 'desenvolver' el marcador de posición para eliminarla, usando el siguiente código:

// 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); 
     }); 
    }; 

Todas las características de animación jQuery tienen manipuladores 'onComplete' que le permiten dar inicio a diferentes partes de la animación una vez que se han completado, por lo que no es demasiado tarea para lograr todo esto.

Además, es muy útil para mantener un modelo de JavaScript de todos sus elementos en vez de confiar en el método lento jQuery .data() DOM-transversal y.

Answer 2

Un simple fadeIn por lo general funciona bien.

Answer 3

Se podría hacer algo como:

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

Answer 4

Pruebe algo como esto:.

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

donde 1000 es la velocidad de las cuales el artículo puede desvanecerse en que puse la piel() en ese país suponiendo que el nuevo elemento DOM esté visible cuando se creó, no estoy seguro si es necesario o no. Lo mejor que puede hacer es colocar una "pantalla: ninguna" en el nuevo elemento cuando lo cree y luego simplemente use fadeIn().

Hay otros efectos que se pueden utilizar también como slideUp/slideDown por lo que puede que desee ver en los mismos.

Answer 5

Puedes ir a cualquier animación. Usted puede ir para un simple show

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

O como se sugirió anteriormente, fadeIn. De nuevo, puede decidir la velocidad, como en show. O podría ir a una animación personalizada.

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

Go here para la documentación de efectos jQuery.