.load 및 .fadeIn을 사용하여 DIV 내용을 변경하는 방법은 무엇입니까?

Question

나는 사용하여 사업부의 내용을 변경하려고 해요 :

$('#content').click(function() { 
    $('#content').fadeOut().load('about.php').fadeIn('normal'); 
}); 

를하지만 항상 깜박이고 내가 jQuery를에 약간의 경험이있어 이후, 그것을 해결하는 방법을 모르겠어요.

나는이 동일한 질문을 여기에서 보았고 선택한 대답을 시도했지만 아무 소용이 없습니다. fadeOut의 loadcallback A와 사용

$('#content').click(function(){ 
    $('#content').fadeOut(function(){ 
    $('#content').load('about.php').fadeIn('normal'); 
    }); 
}); 

:

Answer 1

.fadeOut() 및 .load() 함수의 콜백 함수를 사용해야합니다. 현재 페이드 아웃하고 HTML을 추가 한 다음 동시에 모두 페이드 인합니다.

시도 : 다음 중 하나를 실행하기 전에 각 프로세스가 완료 할 수 있도록

//add event handler to click event for the #content element 
$('#content').click(function() { 

    //cache this element 
    var $this = $(this); 

    //fadeOut the element 
    $this.fadeOut(function() { 

     //after fadeOut is done, change it's HTML 
     $this.load('about.php', function() { 

      //now fadeIn the new HTML, this is in the callback for the `.load()` 
      //function because `.load()` is an asynchronous function 
      $this.fadeIn(); 
     }); 
    }); 
}); 

나는 모든 callback 기능을 중첩 된 이유입니다. 먼저 .fadeOut()이 완료되면 .load()이 데이터를 가져 와서 DOM에 배치 한 다음 새 HTML이 포함 된 .fadeIn() 요소를 가져올 수 있습니다.

Answer 2

은 당신이 뭔가를 할 수 있습니다.