애니메이션 기능을 기다립니다 자바 스크립트

Question

내가 자바 스크립트에서 다음과 같은 방법이 있습니다

Controller.prototype.changeScene = function (curScene, newScene) { 
    sf.scene.hide(curScene); 
    sf.scene.show(newScene, curScene); 
    sf.scene.focus(newScene); 
}; 

그리고 다른 JS 클래스에

:

Test.prototype.handleHide = function() { 
    alert("SceneDialog.handleHide()"); 
    $(".screenOverlay").fadeOut("slow"); 
    $(".dialogBox").fadeOut("slow"); 
}; 

sf.scene.hide()가 handleHide 메소드를 호출합니다. handleHide에는 애니메이션이 있지만 표시되지 않습니다. 컨트롤러는 완료 될 때까지 기다리지 않습니다.

행운없이 $.when(sf.scene.hide()).done()을 시도했습니다.

제안 사항?

Answer 1

jquery 애니메이션 함수를 사용하는 경우 jquery는 일반적으로 함수가 완료 될 때 호출되는 complete 매개 변수를 제공합니다. fadeout를 사용

:

$('#test').fadeOut('slow', function() { 
    // fadeout is finished!! do something 
}); 

Answer 2

당신은 이전이 완료된 후에 만 ​​발생하는 대기중인 애니메이션의 목록을 유지하기 위해 jQuery를 queue를 사용할 수 있습니다.

sf.scene.hide(curScene); 
sf.scene.show(newScene, curScene); 
sf.scene.focus(newScene); 

이 될 것입니다 :

sf.scene.hide(curScene); 
sf.scene.queue(function() { 
    $(this).show(newScene, curScene); 
    $(this).dequeue(); 
}); 
sf.scene.queue(function() { 
    sf.scene.focus(newScene); 
    $(this).dequeue(); 
}); 

Answer 3

당신은 모든 애니메이션이 끝날 때 콜백을 호출하는 JQuery와의 promise() 기능을 사용할 수 있습니다.

Test.prototype.handleHide = function (callback) { 
    $(".screenOverlay,.dialogBox").each(
     function(i) { 
      $(this).fadeOut("slow"); 
     } 
    ); 
    $(".screenOverlay,.dialogBox").promise().done(callback); 
}; 

을 그리고 handleHide에 인수로 콜백을 전달합니다

사용해보십시오. 귀하의 changeScene 함수는 다음과 같아야합니다 :

Controller.prototype.changeScene = function (curScene, newScene) { 
    sf.scene.hide(curScene, function() { 
     sf.scene.show(newScene, curScene); 
     sf.scene.focus(newScene); 
    }); 
};