jQuery usando append con efectos

¿Cómo puedo usar .append() con efectos como show('slow')

Tener efectos en append no parece funcionar en absoluto, y da el mismo resultado que show() normal show() . Sin transiciones, sin animaciones.

¿Cómo puedo agregar un div a otro y tener un efecto slideDown o show('slow') sobre él?

Tener efectos en agregar no funcionará porque el contenido que muestra el navegador se actualiza tan pronto como se agrega el div. Entonces, para combinar las respuestas de Mark B y Steerpike:

Ajuste el div que está agregando como oculto antes de agregarlo. Puedes hacerlo con script CSS en línea o externo, o simplemente crea el div como

  

Luego puede encadenar efectos a su apéndice ( demo ):

 $('#new_div').appendTo('#original_div').show('slow'); 

O ( demo ):

 var $new = $('#new_div'); $('#original_div').append($new); $new.show('slow'); 

La esencia es esta:

  1. Estás llamando ‘anexar’ al padre
  2. pero quieres llamar ‘mostrar’ al nuevo niño

Esto funciona para mí:

 var new_item = $('

hello

').hide(); parent.append(new_item); new_item.show('normal');

o:

 $('

hello

').hide().appendTo(parent).show('normal');

Otra forma cuando se trabaja con datos entrantes (como desde una llamada ajax):

 var new_div = $(data).hide(); $('#old_div').append(new_div); new_div.slideDown(); 

Algo como:

 $('#test').append('
Hello
').hide().show('slow');

¿Deberías hacerlo?

Editar: perdón, error en el código y también aceptó la sugerencia de Matt.

Cuando anexas al div, ocúltalo y muéstralo con el argumento "slow" .

 $("#img_container").append(first_div).hide().show('slow'); 

Establezca el div adjunto para que se oculte inicialmente a través de la visibility:hidden css visibility:hidden .

Necesitaba un tipo similar de solución, quería agregar datos en una pared como facebook, cuando se publica, usa prepend() para agregar la última publicación en la parte superior, el pensamiento podría ser útil para otros.

 $("#statusupdate").submit( function () { $.post( 'ajax.php', $(this).serialize(), function(data){ $("#box").prepend($(data).fadeIn('slow')); $("#status").val(''); } ); event.preventDefault(); }); 

el código en ajax.php es

 if (isset($_POST)) { $feed = $_POST['feed']; echo ""; } 

¿Por qué no simplemente ocultas, anexas y luego muestras así?

 

Es posible mostrar sin problemas si usa Animación. Con estilo solo agrega “animación: muestra 1s” y todo el aspecto se describe en fotogtwigs clave.

En mi caso:

 $("div.which-stores-content").append("
Content
); $("div.content").hide().show("fast");

puede ajustar su css con visibilidad: hidden -> visibility: visible y ajustar la transición de transición, etc.: visibilidad 1.0s;