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();
Eric Schoonover
sumber

Jawaban:

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

sumber
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