jQuery mit Append mit Effekten

Wie kann ich .append()mit Effekten wie verwendenshow('slow')

Effekte zu haben appendscheint überhaupt nicht zu funktionieren und liefert das gleiche Ergebnis wie normal show(). Keine Übergänge, keine Animationen.

Wie kann ich einen Div an einen anderen anhängen und einen slideDownoder einen show('slow')Effekt darauf haben?

Auswirkungen auf das Anhängen funktionieren nicht, da der vom Browser angezeigte Inhalt aktualisiert wird, sobald das div angehängt wird. Um die Antworten von Mark B und Steerpike zu kombinieren:

Gestalten Sie das Div, das Sie anhängen, als versteckt, bevor Sie es tatsächlich anhängen. Sie können dies mit einem Inline- oder externen CSS-Skript tun oder einfach das div als erstellen

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

Dann können Sie Effekte an Ihren Anhang ( Demo ) ketten :

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

Oder ( Demo ):

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

Das Wesentliche ist:

1. Sie rufen beim Elternteil "Anhängen" auf
2. Sie möchten jedoch "show" für das neue Kind aufrufen

Das funktioniert bei mir:

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

oder:

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

Eine andere Möglichkeit beim Arbeiten mit eingehenden Daten (wie bei einem Ajax-Anruf):

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

Etwas wie:

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

Sollte es tun?

Bearbeiten: Entschuldigung, Fehler im Code und nahm auch Matts Vorschlag an Bord.

Wenn Sie an das div anhängen, verstecken Sie es und zeigen Sie es mit dem Argument an "slow".

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

Stellen Sie das angehängte div so ein, dass es zunächst über CSS ausgeblendet wird visibility:hidden.

Ich brauchte eine ähnliche Lösung, wollte Daten auf einer Pinnwand wie Facebook hinzufügen, wenn sie veröffentlicht wurden, verwenden prepend(), um den neuesten Beitrag oben hinzuzufügen, dachte, könnte für andere nützlich sein.

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

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

Der Code in ajax.php ist

if (isset($_POST))
{

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


}

Warum versteckst du dich nicht einfach, fügst es hinzu und zeigst es dann so:

<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 ist möglich, glatt zu zeigen, wenn Sie Animation verwenden. Fügen Sie im Stil einfach "Animation: Show 1s" hinzu und das gesamte Erscheinungsbild wird in Keyframes beschrieben.

In meinem Fall:

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

Sie können Ihr CSS mit Sichtbarkeit anpassen: versteckt -> Sichtbarkeit: sichtbar und die Übergänge usw. anpassen. Übergang: Sichtbarkeit 1.0s;