Bagaimana cara membuat jQuery menunggu sampai efek selesai?

107

Saya yakin saya membaca tentang ini beberapa hari yang lalu tetapi sepertinya saya tidak dapat menemukannya di mana pun.
Saya memiliki fadeOut()acara setelah saya menghapus elemen, tetapi jQuery menghapus elemen sebelum memiliki kesempatan untuk menyelesaikan memudar.
Bagaimana cara membuat jQuery menunggu hingga elemen memudar, lalu menghapusnya?

jquery uriDium
sumber

Jawaban:

167

Anda dapat menentukan fungsi panggilan balik:

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

Dokumentasi di sini .

Paolo Bergantino
sumber
Bingo. Saya pikir memang begitu, tetapi yang perlu saya lakukan adalah meletakkan seluruh fungsi saya di sana bukan hanya bagian yang dihapus. PS Jika ada yang tertarik, buku yang saya baca dan sekarang telah ditemukan lagi adalah Belajar JQuery - Interaksi dan Desain yang Lebih Baik. Terima kasih lagi
uriDium
Jika seseorang memiliki jQuery lama, bug "animasi selesai panggilan balik" ini sangat buruk: bugs.jquery.com/ticket/5684
JustAMartin
178

Dengan jQuery versi 1.6 Anda dapat menggunakan .promise()metode ini.

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});
Reinaldo Junior
sumber
4
Ini berlebihan untuk sebagian besar animasi jQuery karena ada argumen callback pada sebagian besar metode, tetapi menggunakan promise()atau when()dan done()Anda dapat memanfaatkan beberapa perilaku yang sangat keren dari metode pihak ketiga, atau bahkan milik Anda sendiri. 1 untuk berarti .promise()!
stuartc
4
Belum pernah mendengar ini sebelumnya, hanya menyelamatkan pantatku.
prismspecs
1
dalam kasus saya, saya mencoba mengakses animasi saat ini dari elemen yang terjadi di tempat lain dalam kode saya, dan karena itu saya tidak memiliki akses ke callbacknya. +1
Kristian
11
Menggunakan promise () juga memungkinkan Anda menyiapkan satu callback ketika semuanya sudah selesai. Jika Anda memanggil fadeOut () pada satu set 10 objek, akan ada satu callback untuk setiap objek dengan 'this' disetel ke cakupan yang sesuai. Jika Anda hanya ingin mengaktifkan sekali, fungsi ini sangat membantu. Selain itu: Jika Anda menganimasikan pada pemilih yang ternyata cocok dengan elemen nol, callback normal tidak akan pernah diaktifkan. Promise () akan aktif di akhir apa pun yang terjadi.
zslayton
6
Anda juga dapat $(selector).fadeOut('slow').promise().done(function(){...});
merangkainya
9

Anda juga bisa menggunakan $.when()untuk menunggu sampai promiseselesai:

var myEvent = function() {
    $( selector ).fadeOut( 'fast' );
};
$.when( myEvent() ).done( function() {
    console.log( 'Task finished.' );
} );

Jika Anda melakukan permintaan yang juga bisa gagal, Anda bahkan dapat melangkah lebih jauh:

$.when( myEvent() )
    .done( function( d ) {
        console.log( d, 'Task done.' );
    } )
    .fail( function( err ) {
        console.log( err, 'Task failed.' );
    } )
    // Runs always
    .then( function( data, textStatus, jqXHR ) {
        console.log( jqXHR.status, textStatus, 'Status 200/"OK"?' );
    } );
kaisar
sumber
2
Bagian dari jawaban ini menggunakan $.when()tidak bekerja karena myEvent()tidak mengembalikan janji dan $.when()mengharapkan Anda untuk memberikan satu atau lebih janji untuk melakukan tugasnya.
jfriend00
6

jika itu adalah sesuatu yang ingin Anda alihkan, memudarkan yang satu dan memudarkan yang lain di tempat yang sama, Anda dapat menempatkan atribut {position: absolute} pada div, sehingga animasi diputar di atas satu sama lain, dan Anda tidak memiliki untuk menunggu satu animasi selesai sebelum memulai animasi berikutnya.

Samin
sumber