jQuery menggunakan append dengan efek

144

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?

David King
sumber

Jawaban:

195

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');
Matt Ball
sumber
5
mungkin gaya inline, menambahkan kelas css seperti "tersembunyi" yang sama dengan menampilkan: tidak ada .. "berkelas" (baddoom tsh);)
dmp
2
Ini tidak akan berhasil. Saat Anda menggunakan append, itu akan mengembalikan original_div bukan elemen yang baru ditambahkan. Jadi, Anda benar-benar memanggil acara di wadah.
Vic
1
@Vic saat itu terjadi .append()bahkan tidak mengambil string pemilih. Idenya masih benar. Terima kasih, diperbarui.
Matt Ball
Demo berfungsi dengan baik, tetapi mengasumsikan konten ada - sehingga tidak akan berfungsi jika Anda menghasilkan konten, misalnya. menarik konten alt gambar untuk membuat judul atau ...
Drew Dello Stritto
124

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');
Derek Illchuk
sumber
2
Saya sudah mencoba kedua cara ini dan tidak berhasil. Tidak ada efek geser halus pada konten yang ditambahkan.
Chris22
'normal'bukan string yang tepat untuk kecepatan. biarkan kosong tanpa transisi (segera muncul). gunakan string 'fast'untuk 200 'slow'ms atau 600 ms. atau ketikkan angka seperti $("element").show(747)(= 747ms) untuk menentukan kecepatan sendiri. lihat dokumen dan cari animasi / durasi.
honk31
2
Dengan efek slide: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Kevin Grabher
Saya suka menyimpan bagian hide dari template
lilalinux
23

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

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.

Mark Bell
sumber
1
Tidak yakin apakah yang akan melakukan apa yang dia inginkan, tapi jika demikian, Anda akan lebih rantai fungsi: $('#divid').append('#newdiv').hide().show('slow').
Matt Ball
Itu berhasil; meskipun bit #newdiv salah dan Anda benar, Anda dapat mengaitkannya. Saya sudah mengedit jawaban saya sekarang.
Mark Bell
8

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

$("#img_container").append(first_div).hide().show('slow');
Shubham Khatri
sumber
Acara sembunyikan dan tunjukkan berlaku untuk #img_container dan bukan pada first_div, Anda harus menggunakan appendTo
JesuLopez
4

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

Steerpike
sumber
3

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


}
Karthik Sekar
sumber
1

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

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

NeedHate
sumber
0

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;

Bumpaster
sumber