페이드 아웃이 완료되기 전에 fadeOut() 콜백이 완료됩니다.

Question

클릭 할 때 헤더 및 단락 태그의 글꼴을 전환해야하는 글꼴 테스트 페이지에서 작업하고 있습니다. 어느 잘 작동하지만 경험은 정말 다음과 같은 경로를 부드럽게하려면 너무 거슬리는된다

페이드 아웃 -> 폰트 스왑을 -

에> 페이드 그러나 코드는 글꼴을 실행 먼저 스왑 한 다음 애니메이션.

다음 코드 단편은 내 문제의 근본 원인이기 때문에 jQuery 만 포함합니다.

// Anytime a card is clicked 
$('.card').click(function(){ 
    // Call card by id and switch the fonts 
    var id = "#" + this.parentElement.id; 
    $(this).fadeOut(900,swapFont(id)); 
    $(this).fadeIn(500); 
    // attach the above to some sort of transition callback 

}); 

// Function to swap the font around so that the header is now the body font and the body font is now the header font 
function swapFont(id) { 
// font-swap logic in here which works fine 
} 

Answer 1

, 대신 당신은 함수 자체를 가리 키도록해야합니다.

그래서이 :

$(this).fadeOut(900, function() { swapFont(id) }); 

---

편집 :

var x = swapFont(id); 
$(this).fadeOut(900, x); 

가장 쉬운 방법은 익명 함수를 래핑하는 것입니다 :

$(this).fadeOut(900,swapFont(id)); 

는 것과 동일합니다 :

fadeIn도 fadeOut이 완료되기 전에 실행됩니다. .delay을 추가하거나 Rory의 대답에 따라 콜백에서 fadeIn (더 이상 설명하지 않겠습니다)을 호출 할 수 있습니다.

Answer 2

fadeOut() 애니메이션이 (비효율적으로) 비동기이기 때문에 문제가 발생했습니다. 이것은 애니메이션이 진행되는 동안 다음 문장이 평가된다는 것을 의미합니다. 따라서 당신이 보는 행동입니다. 이 문제를 해결하려면 fadeX() 메서드가 제공하는 콜백 패턴을 사용해야합니다.

또한 이벤트가 발생할 때 실행될 함수 참조 대신 swapFont()의 즉치 실행 결과를 콜백에 전달합니다. 이 시도 : 당신은 현재 swapFont() 호출의 결과를 전달하는

$('.card').click(function(){ 
    var id = "#" + this.parentElement.id; 
    $(this).fadeOut(900, function() { 
    swapFont(id); 
    $(this).fadeIn(500); 
    }); 
});