jQuery usando append con efectos

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

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

¿Cómo puedo añadir un div a otro, y tienen una slideDowno show('slow')efecto sobre ella?

Tener efectos en append 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:

Dale estilo al div que estás agregando como oculto antes de agregarlo. Puede hacerlo con un script CSS en línea o externo, o simplemente crear el div como

<div id="new_div" style="display: none;"> ... </div>

Luego , puede encadenar los efectos a su anexo ( demostración ):

$('#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 'agregar' al padre
2. pero quieres llamar a 'show' en el nuevo hijo

Esto funciona para mi:

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

o:

$('<p>hello</p>').hide().appendTo(parent).show('normal');

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

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

Algo como:

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

¿Deberías hacerlo?

Editar: lo siento, error en el código y también tomé en cuenta la sugerencia de Matt.

Cuando anexes al div, escóndelo y muéstralo con el argumento "slow".

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

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

Necesitaba un tipo de solución similar, quería agregar datos en un muro como Facebook, cuando se publique, usar prepend()para agregar la última publicación en la parte superior, pensé que 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 "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

¿Por qué no te escondes, anexas y luego muestras, así:

<div id="parent1" style="  width: 300px; height: 300px; background-color: yellow;">
    <div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>


<div id="parent2" style="  width: 300px; height: 300px; background-color: green;">
</div>

<input id="mybutton" type="button" value="move">

<script>
    $("#mybutton").click(function(){
        $('#child').hide(1000, function(){
            $('#parent2').append($('#child'));
            $('#child').show(1000);
        });

    });
</script>

Es posible mostrar sin problemas si utiliza animación. En estilo simplemente agregue "animación: mostrar 1s" y toda la apariencia se describe en fotogramas clave.

En mi caso:

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

puede ajustar su CSS con visibilidad: oculta -> visibilidad: visible y ajustar las transiciones, etc. transición: visibilidad 1.0s;