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

尝试使用call back功能

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

Answer 2

如果您查看fadeIn()和fadeOut()函数的文档，您会注意到其中一个参数是callback。此参数是在执行淡入淡出后将被称为的函数。尝试使用它来控制何时更改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(); 
       });