jQuery menggunakan append dengan efek

Bagaimana saya bisa menggunakan .append()efek sepertishow('slow')

Mempunyai efek pada appendsepertinya tidak bekerja sama sekali, dan itu memberikan hasil yang sama seperti biasa show(). Tidak ada transisi, tidak ada animasi.

Bagaimana saya bisa menambahkan satu div ke yang lain, dan memiliki slideDownatau show('slow')berpengaruh padanya?

Memiliki efek pada append tidak akan berfungsi karena konten yang ditampilkan browser diperbarui segera setelah div ditambahkan. Jadi, untuk menggabungkan jawaban Mark B dan Steerpike:

Gaya div yang Anda tambahkan sebagai tersembunyi sebelum Anda benar-benar menambahkannya. Anda dapat melakukannya dengan skrip CSS inline atau eksternal, atau cukup buat div sebagai

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

Kemudian Anda dapat menghubungkan efek ke append Anda ( demo ):

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

Atau ( demo ):

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

Intinya adalah ini:

1. Anda memanggil 'tambahkan' pada induknya
2. tetapi Anda ingin memanggil 'tunjukkan' pada anak baru

Ini bekerja untuk saya:

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

atau:

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

Cara lain ketika bekerja dengan data yang masuk (seperti dari panggilan ajax):

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

Sesuatu seperti:

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

harus melakukannya?

Sunting: maaf, kesalahan dalam kode dan mengambil saran Matt di papan juga.

Saat Anda menambahkan div, sembunyikan dan perlihatkan dengan argumen "slow".

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

Setel div yang ditambahkan disembunyikan pada awalnya melalui css visibility:hidden.

Saya membutuhkan solusi yang serupa, ingin menambahkan data di dinding seperti facebook, ketika diposting, gunakan prepend()untuk menambahkan posting terbaru di atas, mungkin berguna untuk orang lain ..

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

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

kode dalam ajax.php adalah

if (isset($_POST))
{

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


}

Mengapa Anda tidak menyembunyikan saja, menambahkan, lalu menunjukkan, seperti ini:

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

Dimungkinkan untuk menampilkan dengan lancar jika Anda menggunakan Animasi. Dalam gaya cukup tambahkan "animasi: show 1s" dan seluruh penampilan menggambarkan dalam keyframe.

Dalam kasus saya:

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

Anda dapat menyesuaikan css Anda dengan visibilitas: tersembunyi -> visibilitas: terlihat dan menyesuaikan transisi dll transisi: visibilitas 1.0s;