fadeOut/fadeIn 전에 jQuery load()를 완료하려면 어떻게해야합니까?

Question

jQuery load()를 통해 AJAX 호출을하고 싶습니다. 반환하면 한 번만 fadeOut 이전 내용과 fadeIn 새 내용. 새 콘텐츠를 검색 할 때까지 이전 콘텐츠를 표시하고 싶습니다.이 시점에서 페이드 아웃/인이 트리거됩니다.

사용 :

$('#data').fadeOut('slow').load('/url/').fadeIn('slow'); 

내용은 페이드 아웃하고 나중에 잠시 부하() 호출이 반환, 데이터 업데이트,하지만 페이드가 이미 완료했다.

Answer 1

콜백을 사용하여 호출 순서를 제어합니다.

var $data = $('#data'); 
$data.fadeOut('slow', function() { 
    $data.load('/url/', function() { 
     $data.fadeIn('slow'); 
    }); 
}); 

(참고 : 나는var $data = ...및를 사용하는 경우 $data.doStuff()실제로 작동에 대해 100 % 확실하지 않다 - 그것은 않는 경우, 그것은 DOM 트리에서 DIV를 검색하는 데에서 당신을 저장 때마다하지만, 단지 첫 번째 줄을 제거하고 사방$('#data')사용하지 않는 경우 ...

Answer 2

문제는 세 가지 기능, 페이드 아웃, 부하와 fadeIn 비동기 있다는 사실과 관련이 있습니다. 각 Abov의 e 함수는 함수가 실행을 끝낼 때 실행할 콜백 인수 (함수)를 받아들입니다. 예 :

$('#data').fadeOut(functionToRunWhenFadeOutIsComplete); 

// 'functionToRunWhenFadeOutIsComplete'를 정의한 경우 fadeOut이 종료 된 후에 실행됩니다.

이 지식으로 무장하면 이제 문제를 해결할 수 있습니다.

var fadeInData = function fadeInData() { $('#data').fadeIn(); } 
var loadData = function loadData() { $('#data').load('url', fadeInData); } 
$('#data').fadeOut(loadData); 

또는 loadData, fadeInData를 인라인 익명 함수로 정의 할 수 있습니다.