jQuery usando anexar com efeitos

Como posso usar .append()com efeitos comoshow('slow')

Ter efeitos appendnão parece funcionar de maneira alguma, e dá o mesmo resultado que o normal show(). Sem transições, sem animações.

Como posso anexar um div a outro e ter um slideDownou show('slow')efeito sobre ele?

Ter efeitos no acréscimo não funcionará porque o conteúdo exibido pelo navegador é atualizado assim que a div é anexada. Então, para combinar as respostas de Mark B e Steerpike:

Denomine a div que você está anexando como oculta antes de realmente anexá-la. Você pode fazer isso com script CSS embutido ou externo ou apenas criar a div como

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

Então você pode encadear efeitos ao seu anexo ( demo ):

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

Ou ( demo ):

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

A essência é esta:

1. Você está chamando 'anexar' no pai
2. mas você deseja chamar 'show' no novo filho

Isso funciona para mim:

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

ou:

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

Outra maneira ao trabalhar com dados recebidos (como em uma chamada 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');

deveria fazer isso?

Edit: desculpe, erro no código e levou a sugestão de Matt a bordo também.

Quando você anexar ao div, escondê-lo e mostrá-lo com o argumento "slow".

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

Defina a div anexada como oculta inicialmente por meio de css visibility:hidden.

Eu estava precisando de um tipo semelhante de solução, queria adicionar dados em uma parede como o facebook, quando postado, use prepend()para adicionar o post mais recente no topo, o pensamento pode ser útil para outras pessoas.

$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });   

o código no ajax.php é

if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

Por que você simplesmente não esconde, acrescenta e mostra assim:

<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>

É possível mostrar suavidade se você usar Animação. Com estilo, adicione "animation: show 1s" e toda a aparência aparece nos quadros-chave.

No meu caso:

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

você pode ajustar seu css com visibilidade: oculto -> visibilidade: visível e ajustar as transições etc transição: visibilidade 1.0s;