효과가 끝날 때까지 jQuery를 기다리는 방법은 무엇입니까?

107

나는 요 전에 이것에 대해 읽었을 것이라고 확신하지만 어디서도 찾을 수없는 것 같습니다.
나는이 fadeOut()내가 요소를 제거 후 이벤트를하지만 페이드 아웃 완료 할 수있는 기회를하기 전에 jQuery를이 요소를 제거하고 있습니다.
요소가 사라질 때까지 jQuery를 기다린 다음 제거하려면 어떻게해야합니까?

jquery

— uriDium
소스

167

콜백 함수를 지정할 수 있습니다.

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

여기에 문서가 있습니다 .

— 파올로 베르 간 티노
소스

빙고. 나는 그것이 있다고 생각했지만 내가해야 할 일은 제거 부분뿐만 아니라 전체 기능을 거기에 넣는 것입니다. 추신 : 내가 읽은 책에 관심이있는 사람이 있다면 Learning JQuery-Better Interaction and Design입니다. 다시 한 번 감사드립니다

— uriDium

누군가 오래된 jQuery를 가지고 있다면,이 "animation done callback"버그는 끔찍한 버그였습니다 : bugs.jquery.com/ticket/5684

— JustAMartin

178

jQuery 1.6 버전에서는이 .promise()방법을 사용할 수 있습니다 .

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

— 레이 날도 주니어
소스

4

거기에 대부분의 방법에 대한 콜백 인수가 있지만 사용하는 것으로 이것은 대부분의 jQuery 애니메이션에 대한 중복 promise()또는 when()과 done()심지어 자신의 당신이 제 3의 방법에서 아주 멋진 동작을 활용하거나. 의미 +1 .promise()!

— stuartc

4

전에 들어 본 적 없어, 그냥 내 엉덩이를 구했어.

— prismspecs

1

제 경우에는 코드의 다른 곳에서 발생하는 요소의 현재 애니메이션에 액세스하려고했기 때문에 콜백에 액세스 할 수 없었습니다. +1

— Kristian

11

promise ()를 사용하면 모든 것이 완료되었을 때 단일 콜백을 설정할 수도 있습니다. 10 개의 항목에 대해 fadeOut ()을 호출하면 'this'가 적절한 범위로 설정된 각 항목에 대해 하나의 콜백이 있습니다. 한 번만 발사하고 싶다면이 기능이 정말 유용합니다. 또한 : 0 요소와 일치하는 것으로 판명 된 선택기에서 애니메이션을 적용하면 일반 콜백이 실행되지 않습니다. Promise ()는 무슨 일이 있어도 마지막에 실행됩니다.

— zslayton

6

다음과 같이 연결할 수도 있습니다.$(selector).fadeOut('slow').promise().done(function(){...});

— Syclone

9

완료 $.when()될 때까지 대기 하는 데 사용할 수도 있습니다 promise.

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

실패 할 수도있는 요청을 수행하는 경우 한 단계 더 나아갈 수도 있습니다.

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

— 황제
소스

2

이 답변의이 부분은 약속을 반환 $.when()하지 않고 작업을 수행하기 위해 하나 이상의 약속을 통과하기를 기대 하기 때문에 작동 myEvent()하지 않습니다 $.when().

— jfriend00 2016

6

전환하려는 경우 하나는 페이드 아웃하고 다른 하나는 같은 위치에서 페이드하는 경우 div에 {position : absolute} 속성을 배치 할 수 있으므로 두 애니메이션이 서로 겹쳐서 재생됩니다. 다음 애니메이션을 시작하기 전에 한 애니메이션이 끝날 때까지 기다립니다.

— 사민
소스