jQuery usando append con effetti

Come posso usare .append()con effetti comeshow('slow')

Avere effetti su appendnon sembra funzionare affatto e dà lo stesso risultato del normale show(). Nessuna transizione, nessuna animazione.

Come posso aggiungere un div ad un altro, e hanno un slideDowno show('slow')effetto su di esso?

Avere effetti su append non funzionerà perché il contenuto visualizzato dal browser viene aggiornato non appena viene aggiunto il div. Quindi, per combinare le risposte di Mark B e Steerpike:

Modella il div che stai aggiungendo come nascosto prima di accodarlo. Puoi farlo con script CSS inline o esterni, o semplicemente creare il div come

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

Quindi puoi concatenare gli effetti alla tua append ( demo ):

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

Oppure ( demo ):

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

L'essenza è questa:

1. Stai chiamando 'append' sul genitore
2. ma vuoi chiamare "show" sul nuovo figlio

Questo funziona per me:

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

o:

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

Un altro modo quando si lavora con i dati in arrivo (come da una chiamata Ajax):

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

Qualcosa di simile a:

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

dovrebbe farlo?

Modifica: scusa, sbaglio nel codice e ho accettato anche il suggerimento di Matt.

Quando ti aggiungi al div, nascondilo e mostralo con l'argomento "slow".

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

Imposta inizialmente il div aggiunto da nascondere inizialmente tramite CSS visibility:hidden.

Avevo bisogno di un simile tipo di soluzione, volevo aggiungere dati su un muro come Facebook, quando pubblicato, utilizzare prepend()per aggiungere l'ultimo post in alto, pensato potrebbe essere utile per gli altri ..

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

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

il codice in ajax.php è

if (isset($_POST))
{

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


}

Perché non semplicemente nascondere, aggiungere, quindi mostrare, in questo modo:

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

È possibile mostrare senza problemi se si utilizza l'animazione. Con stile basta aggiungere "animazione: mostra 1s" e l'intero aspetto viene descritto nei fotogrammi chiave.

Nel mio caso:

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

puoi regolare i tuoi CSS con visibilità: nascosto -> visibilità: visibile e regolare le transizioni ecc. transizione: visibilità 1.0s;