Jquery의 다른 콜백에서 콜백 사용

Question

Jquery에서 콜백을 사용하여 함수 뒤에 다른 함수를 시도하고 있습니다. 하지만 두 번째 기능이 작동하지 않는 이유를 모르겠다. 오타가 있거나 내 코드에 뭔가있는 것 같지 않아서이 문제를 해결할 수 있습니까?

여기 내 코드입니다. 고맙습니다 !

$("#best_1").animate({'opacity':'0'},2000, function(){ 
    $("#best_1").removeClass("best_1", function(){ 
    $("#best_1").animate({'opacity':'1'},2000); 
    $("#best_1").addClass("best_11"); 

    }); 
}); 

Answer 1

removeClass는

이

$("#best_1").animate({'opacity':'0'},2000, function(){ 
    $(this).toggleClass("best_1 best_11 ").animate({'opacity':'1'},2000);  
}); 

Answer 2

난 당신이 지금하지 않는 ... 실행의 특정 순서가 콜백을 사용한다고 가정을 시도 동기입니다. 여기

그러나

내가 당신이 원하는 생각입니다 :

$("#best_1").animate({'opacity':'0'},2000, function(){ // Executes 1st 
    $("#best_1").removeClass("best_1");     // Executes 2nd 
    $("#best_1").animate({'opacity':'1'},2000, function(){ // Executes 3rd 
    $("#best_1").addClass("best_11");     // Executes 4th 
    }); 
}); 

이 방법은, 라인 # 2, 3, 4가 fisrt 애니메이션 후에 발생 1 콜백, 내부에; 그리고 # 4 번 라인은 두번째 라인 인 # 3의 .animate() 콜백에 있습니다.

일부 메서드를 사용하면 콜백을 사용하여 무언가를 실행해도됩니다. 그러나 대부분의 메서드는 그렇지 않습니다. 이 경우 setTimeout()을 사용하여 무언가의 실행을 지연시킬 수 있습니다.

저는 CSS가 없습니다 ... 그래서 아래의 예를 위해 몇 가지를 고안했습니다.

약 setTimeout()에 대해 실행 순서는 첫 번째 애니메이션이 끝난 직후입니다 ... 애니메이션을 끝내기 전에. 5 초 지연은 첫 번째 줄의 "읽기"직후에 시작됩니다. 그래서 시작부터 5 초입니다 ... 마지막 애니메이션의 끝 부분이 아닙니다.

$("#best_1").animate({'opacity':'0'},2000, function(){ // Executes 1st 
 
    $("#best_1").removeClass("best_1");     // Executes 2nd 
 
    $("#best_1").animate({'opacity':'1'},2000, function(){ // Executes 3rd 
 
    $("#best_1").addClass("best_11");     // Executes 4th 
 
    }); 
 
}); 
 
setTimeout(function(){ 
 
    $(".be_title").html("Hello! I appeared after 5 seconds because of setTimeout.") 
 
},5000);

.best_1{ 
 
    color:red; 
 
} 
 
.best_11{ 
 
    color:blue; 
 
} 
 
.be_date{ 
 
    display:block; 
 
} 
 
.be_title{ 
 
    display:block; 
 
    border:1px solid black; 
 
    padding:2em; 
 
} 
 
.be_button{ 
 
    display:block; 
 
    width:3em; 
 
    background-color:grey; 
 
    border-radius:6px; 
 
    padding:0.5em 1em; 
 
    margin:0.5em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="best_1" class="best_1 best_img"> 
 
    <span class="be_date">Date 2018</span> 
 
    <span class="be_title">Contents</span> 
 
    <span class="be_button">Check</span> 
 
</div>