jQuery mit Append mit Effekten

144

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?

David King
quelle

Antworten:

195

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');
Matt Ball
quelle
5
war wahrscheinlich der Inline-Stil, der eine CSS-Klasse wie "versteckt" hinzufügte, was der Anzeige entspricht: keine ist .. "klassischer" (baddoom tsh);)
dmp
2
Das wird nicht funktionieren. Wenn Sie append verwenden, wird original_div und nicht das neu angehängte Element zurückgegeben. Sie rufen also tatsächlich show on the container auf.
Vic
1
@Vic .append()nimmt nicht einmal eine Auswahlzeichenfolge . Die Idee ist aber immer noch richtig. Danke, aktualisiert.
Matt Ball
Die Demo funktioniert einwandfrei, setzt jedoch voraus, dass der Inhalt vorhanden ist. Sie funktioniert also nicht, wenn Sie den Inhalt generieren, z. Ziehen Sie den Alt-Inhalt eines Bildes, um einen Titel oder eine Div zu erstellen ...
Drew Dello Stritto
124

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');
Derek Illchuk
quelle
2
Ich habe beide Möglichkeiten ausprobiert und es funktioniert nicht. Es gibt keinen sanften Gleiteffekt auf den angehängten Inhalt.
Chris22
'normal'ist keine richtige Saite für Geschwindigkeit. Lassen Sie es für keinen Übergang leer (wird sofort angezeigt). Verwenden Sie eine Zeichenfolge 'fast'für 200 ms oder 'slow'600 ms. oder geben Sie eine beliebige Zahl wie $("element").show(747)(= 747 ms) ein, um die eigene Geschwindigkeit zu definieren. Sehen Sie sich die Dokumente an und suchen Sie nach Animation / Dauer.
Honk31
2
Mit Diaeffekt: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Kevin Grabher
Ich mag es, den
Hautteil
23

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();
naspinski
quelle
15

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.

Mark Bell
quelle
1
Ich bin mir nicht sicher, ob das tun würde, was er will, aber wenn ja, würden Sie die Funktionen verketten : $('#divid').append('#newdiv').hide().show('slow').
Matt Ball
Es funktioniert; Das # newdiv-Bit ist jedoch falsch und Sie haben Recht, Sie können sie verketten. Ich habe meine Antwort jetzt bearbeitet.
Mark Bell
8

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');
Shubham Khatri
quelle
Das Ein- und Ausblenden-Ereignis gilt für den #img_container und nicht für den first_div. Sie sollten appendTo
JesuLopez
4

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

Steerpike
quelle
3

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


}
Karthik Sekar
quelle
1

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>
Megamind Saiko
quelle
0

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.

NeedHate
quelle
0

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;

Der Bumpaster
quelle