jQuery Append mit Effekten

Question

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

Mit Auswirkungen auf append scheinen gar nicht zu arbeiten, und es das gleiche Ergebnis wie normale show(). Keine Übergänge, keine Animationen.

Wie kann ich anhängen ein div zu einem anderen, und haben eine slideDown oder show('slow') Wirkung auf sie?

Answer 1

Mit Auswirkungen auf append werden nicht funktionieren, weil der Inhalt des Browser angezeigt, sobald aktualisiert wird, wie die div angehängt wird. So kombinieren Mark B und Steerpike der Antworten:

Style die div Sie, bevor Sie als versteckt sind Anfügen es tatsächlich append. Sie können es mit Inline- oder externe CSS-Skript, oder erstellen Sie einfach die div wie

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

Dann Sie können Kette Effekte auf Ihre append ( Demo ):

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

oder ( Demo ):

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

Answer 2

Das Wesentliche ist dies:

1. Du nennst 'append' auf der übergeordneten
2. aber Sie wollen Anruf ‚Show‘ auf dem neuen Kind

Dies funktioniert für mich:

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

oder:

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

Answer 3

Eine andere Möglichkeit, wenn sie mit eingehenden Daten arbeiten (wie von einem Ajax-Aufruf):

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

Answer 4

So etwas wie:

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

sollte es tun?

Edit: sorry, Fehler im Code und nahmen Matt Vorschlag an Bord zu

.

Answer 5

Wenn Sie zu div anhängen, hide it und zeigen es mit dem Argument "slow".

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

Answer 6

Stellen Sie den beigefügten div zunächst durch CSS visibility:hidden versteckt werden.

Answer 7

Ich war in der Notwendigkeit einer ähnlichen Art von Lösung, wollte Daten an einer Wand wie Facebook hinzufügen, wenn geschrieben, Verwendung prepend() Neuester Beitrag oben hinzufügen, dachte vielleicht 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();   
        });   

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


}

Answer 8

Warum gehst du nicht einfach ausblenden, append, dann zeigen, wie folgt aus:

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

Answer 9

Es ist möglich, glatt zu zeigen, wenn Sie Animationen verwenden. In Stil fügen Sie einfach "Animation: Show 1s" und das gesamte Erscheinungsbild Discribe in Keyframes

.

Answer 10

In meinem Fall:

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

Sie können Ihre CSS mit Sichtbarkeit einstellen: versteckt -> Sichtbarkeit: sichtbar und stellen Sie die Übergänge usw. Übergang: Sichtbarkeit 1,0s;