jQuery fadeIn效果不起作用

Question

我尝试在div中加载文本Welcome back!的页面，然后在10秒后淡出并将文本更改为Account Dashboard，然后淡入。

这就是我目前正在使用的内容：

$('.recover_back_top_title').fadeIn().html("Welcome back!").delay(10000).fadeOut().delay(10000).html("Account Dashboard").fadeIn();

目前所有它只是立即进行到最后并将文本设置为帐户仪表板而不做任何影响。我错过了什么吗？

控制台中没有显示任何错误。

Answer 1

将函数传递给fadeIn / fadeOut，动画完成后将调用该函数

$('.recover_back_top_title').fadeIn(function() {
  $(this).html("Welcome back!")
         .delay(2000)
         .fadeOut(function() {
           $(this).delay(2000)
                  .html("Account Dashboard")
                  .fadeIn();
  });
});

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

Answer 2

修改了安德烈斯的回答，以便在其淡入淡出中增加更多的轻松：

$('.recover_back_top_title').fadeIn("slow",function() {
  $(this).html("Welcome back!")
         .delay(2000)
         .fadeOut("slow",function() {
           $(this).delay(2000)
                  .html("Account Dashboard")
                  .fadeIn();
  });
});

你可以玩延迟。