fadeIn() 및 fadeOut() innerhtml

Question

사람들이 이해할 수 있도록 제 질문을 수정했습니다.

내가 가지고있는 div 안에있는 텍스트를 부드럽게 변경하고 싶습니다. 그러나 코드를 시도 할 때 주입 된 내용이 조기에 표시됩니다. 그들은 새로운 innerHTML을 보여주고 사라지거나 페이드 인합니다. 왜 이런 일이 일어나는지 알 수있는 누군가가 나를 도울 수 있습니까? 고맙습니다!

코드 :

case 3: 
    $("#cont").fadeOut() 
    $("#cont").html("<p>Hello!!!!3</p>").fadeIn(); 
    break; 
case 4: 
    $("#cont").fadeOut() 
    $("#cont").html("<p>Hello!!!!4</p>").fadeIn(); 
    break; 

Answer 1

당신이 fadeIn() 및 fadeOut() 기능에 대한 설명서를 보면, 당신은 매개 변수 중 하나가 callback 것을 알 수 있습니다

case 3: 
    $("#cont").fadeOut(400,function(){ 
     $(this).html("<p>Hello!!!!3</p>").fadeIn(); 
    }); 
    break; 

Answer 2

의 call back 기능을 사용해보십시오 . 이 매개 변수는 이후에 이라고하는 함수이며, 페이드가 실행됩니다. 이 기능을 사용하여 HTML이 변경되는시기를 제어하십시오.

Answer 3

전체 코드가없는 하드

하지만이 시도 :

var content = '' 
switch(type){ 
    case 3: 
     content = 'Hello!!!!3'; 
     break; 
    case 4: 
     content = 'Hello!!!!4'; 
     break; 
} 

$("#cont") 
    .stop() // cancel previous animations 
    .fadeOut(400, 
     function(){ // change text and fadeIn once fadeOut completes 
      $("#cont") 
       .html("<p>" + content + "</p>") 
       .fadeIn(); 
     });