JQuery'nin bir efekt bitene kadar beklemesi nasıl sağlanır?

107

Bunu geçen gün okuduğuma eminim ama hiçbir yerde bulamıyorum.
Bir var fadeOut()ben elemanını kaldırmak bundan sonra olayı, ancak kararma bitirmek için şansı var önce jQuery elemanı kaldırıyor.
Nasıl jQuery eleman dışarı solmuş kadar beklemek alabilirim sonra kaldırmak?

jquery

— Uridium
kaynak

167

Bir geri arama işlevi belirtebilirsiniz:

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

Belgeler burada .

— Paolo Bergantino
kaynak

Bingo. Öyle olduğunu düşünmüştüm ama yapmam gereken, sadece kaldırma kısmını değil, tüm işlevimi oraya koymaktı. Not: Herhangi biri ilgilenirse, okuduğum ve şimdi tekrar bulduğum kitap, Learning JQuery - Daha İyi Etkileşim ve Tasarım. Tekrar teşekkürler

— uriDium

Birisi eski jQuery'ye sahipse

— JustAMartin

178

JQuery 1.6 sürümü ile .promise()yöntemi kullanabilirsiniz .

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});

— Reinaldo Junior
kaynak

4

Çoğu jQuery animasyonu için bu, çoğu yöntemde geri arama argümanları olduğu için gereksizdir, ancak promise()veya kullanarak when()ve done()3. taraf yöntemlerden veya hatta kendi yönteminizden çok güzel bazı davranışlardan yararlanabilirsiniz. Anlamlandırma için +1 .promise()!

— stuartc

4

Bunu daha önce duymamıştım, sadece kıçımı kurtardım.

— prismspecs

1

benim durumumda, kodumda başka bir yerde gerçekleşen bir öğenin mevcut animasyonuna erişmeye çalışıyordum ve bu nedenle geri aramasına erişimim yoktu. +1

— Kristian

11

Promise () kullanmak, her şey bittiğinde tek bir geri arama ayarlamanıza da olanak tanır. 10 şeylik bir sette fadeOut () 'u çağırırsanız,' this 'uygun kapsama ayarlanmış her şey için bir geri arama olacaktır. Yalnızca bir kez ateş etmek istiyorsanız, bu işlev gerçekten yararlıdır. Ayrıca: Sıfır öğeyle eşleştiği ortaya çıkan bir seçiciye animasyon uygularsanız, normal geri çağırma asla çalışmaz. Promise () ne olursa olsun sonunda ateşlenecek.

— zslayton

6

Bunu şu şekilde de zincirleyebilirsiniz:$(selector).fadeOut('slow').promise().done(function(){...});

— Syclone

9

$.when()Bitene kadar beklemek için de kullanabilirsiniz promise:

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

Başarısız olabilecek bir istek yapıyorsanız, bir adım daha ileri gidebilirsiniz:

$.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"?' );
    } );

— Kayser
kaynak

2

Kullanarak bu cevabın bu kısmı $.when()işe yaramıyor çünkü myEvent()bir söz $.when()vermiyor ve işini yapması için bir veya daha fazla söz vermenizi bekliyor.

— jfriend00

6

Değiştirmek istediğiniz bir şey varsa, birini soldurup aynı yere diğerini soldurursanız, div'lere bir {position: absolute} özelliği yerleştirebilirsiniz, böylece her iki animasyon da birbirinin üzerinde oynatılır ve sizde Bir sonraki animasyona başlamadan önce bir animasyonun bitmesini beklemek.

— Samin
kaynak