jQuery 淡入效果无效

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

稍微修改了 Andreas 的回答，使其淡化更加轻松：

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

您可以绕过延迟。

jQuery 淡入效果无效

jQuery fadeIn effect not working

html

jquery

fadein