jQuery slideUp (). remove () sepertinya tidak menampilkan animasi slideUp sebelum penghapusan terjadi

94

Saya memiliki baris JavaScript ini dan perilaku yang saya lihat adalah bahwa baris tersebut selectedLilangsung menghilang tanpa "meluncur ke atas". Ini bukan perilaku yang saya harapkan.

Apa yang harus saya lakukan agar selectedLislide ke atas sebelum dihapus?

selectedLi.slideUp("normal").remove();

javascript jquery animation

— Eric Schoonover
sumber

197

Mungkinkah dapat memperbaikinya dengan melakukan panggilan untuk menghapus dalam argumen panggilan balik ke slideUp?

misalnya

selectedLi.slideUp("normal", function() { $(this).remove(); } );

— seanb
sumber

4

Perhatikan bahwa "lambat" dan "cepat" adalah satu-satunya kecepatan. Kecepatan lain harus dalam milidetik atau akan ditetapkan secara default ke 400. keyframesandcode.com/resources/javascript/deconstructed/jquery/…

— bendman

19

Anda harus lebih eksplisit: daripada mengatakan "ini" (yang saya setuju seharusnya berhasil), Anda harus melakukan ini:

$("#yourdiv").slideUp(1000, function() {
    $(this).remove();
});

— Blake
sumber

2

MAAF = Saya lupa menghapus ID saya, seharusnya: $ ('# yourdiv'). SlideUp (1000, function () {$ ('# yourdiv'). Remove ();});

— Blake

12

Menggunakan $ (this) daripada $ ("# yourdiv") lebih dioptimalkan karena jQuery tidak perlu mencari node.

— MaximeBernard

Menggunakan $("#yourdiv")bukannya $(this)benar-benar berlebihan dan bukan itu sebabnya kode ini memperbaiki masalah OP. Kode ini memperbaiki masalah karena menggunakan completecallback.

— Gavin

8

Cara termudah adalah memanggil fungsi "remove ()" di dalam slideUp sebagai parameter seperti yang dikatakan orang lain, seperti contoh ini:

$("#yourdiv").slideUp("normal", function() {
    $(this).remove();
});

Ini adalah suatu keharusan untuk memanggilnya di dalam fungsi anonim () untuk mencegah remove () dijalankan sebelum slideUp berakhir. Cara lain yang sama adalah dengan menggunakan fungsi jQuery "promise ()". Lebih baik bagi mereka yang suka kode penjelasan sendiri, seperti saya;)

$("#yourdiv").slideUp("normal").promise().done(function() {
    $(this).remove();
});

— xaviqv.dll
sumber

3

Dengan menggunakan promise, Anda juga dapat menunggu beberapa animasi selesai, misalnya:

selectedLi.slideUp({duration: 5000, queue: false})
.fadeOut({duration: 3000, queue: false})
.promise().done(function() {
    selectedLi.remove()
})

— Famousgarkin
sumber

-2

selectedLi.slideUp(200, this.remove);

1

Saya menguji - itu tidak menghapus elemen setelah meluncur ke atas.

— Konstantin Spirin

Secara efektif menyembunyikan elemen, tetapi tidak benar-benar menghapusnya dari DOM.

— andreszs