나는 이러한 유형의 문제에 대한 몇 가지 응답을보고 보았지만 여전히 마음을 감쌀 수는 없습니다. 5 개의 다른 애니메이션이 다른 시간에 마무리되는 기능이 있습니다. 다음 함수가 시작되기 전에이 함수가 내부 함수의 애니메이션을 완전히 완료하기를 바랍니다.
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
CSS
#div1 {
background-color:red;
width:100px;
height:100px;
}
#div2 {
background-color:blue;
width:100px;
height:100px;
}
#div3 {
background-color:green;
width:100px;
height:100px;
}
#div4 {
background-color:yellow;
width:100px;
height:100px;
}
#div5 {
background-color:orange;
width:100px;
height:100px;
}
#div6 {
background-color:black;
width:100px;
height:100px;
display:none;
}
JQuery / JS
fadeAll(); // I want to wait for all of the fadeOuts in this function to complete before...
$('#div6').fadeIn(); // .. this function starts.
function fadeAll() {
$('#div1').fadeOut('slow');
$('#div2').fadeOut('fast');
$('#div3').fadeOut();
$('#div4').fadeOut('fast');
$('#div5').fadeOut();
}
fadeout 에 대한 jQuery의 문서를 살펴보십시오 . 거기에서 complete속성을 가질 수 있음을 알 수 있습니다 . 이 예제가 도움이되는지 살펴 보겠습니다.
var fades = 0;
function fadeOut(context, duration, callback) {
fades++;
context.fadeOut(duration, function() {
fades--;
if (typeof callback === "function") {
callback();
}
});
}
function fadeAll(callback) {
fadeOut($("#div1"), 'slow', callback);
fadeOut($("#div2"), 'fast', callback);
fadeOut($("#div3"), undefined, callback);
fadeOut($("#div4"), 'fast', callback);
fadeOut($("#div5"), undefined, callback);
}
function fadeCallback() {
if (fades === 0) {
$('#div6').fadeIn();
}
}
fadeAll(fadeCallback);
여기에 우리가 얼마나 많은 페이드 아웃을 기다리고 있는지를 알 수있는 카운터가 있습니다. a fadeOut가 호출 되면이 숫자를 늘리고 이러한 이벤트가 완료되면 줄입니다. 콜백을 호출하기 전에 값을 줄이면 콜백이 해당 값을 확인합니다. 0이면 콜백이 호출됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다