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?

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');

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');

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();

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.


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');

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.


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


}

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>

0

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


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;

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.