jQuery .load在加载html内容之前等待动画

Question

我正在尝试使用.load来加载新的html页面，但是我想淡入一个全角全高div来覆盖当前内容，然后再加载新的html。使用我当前的代码，加载是瞬时的（不必等待white div淡入）。如何让加载功能等待动画完成？

对不起，如果这令人困惑，请总结一下我想要的内容：

1. 用户点击按钮
2. 带有白色背景的大div会逐渐消失并覆盖所有内容
3. 第2步完成后，.load将加载到新的html中。

我的代码：

$(".viewreport").click(function(){
   $(".coverall").show().addClass("text-focus-in");
   $(".coverall").promise().done(function(){
      $("html").load( "report.html" );
   });
});

Answer 1

这个简单的解决方案是在设置为淡入所花费的时间的超时后调用负载。像这样的东西。

$(".viewreport").click(function(){
        $(".coverall").show().addClass("text-focus-in");
        $(".coverall").promise().done(function(){
            setTimeout(function(){ 
                 $("html").load( "report.html" ); 
            }, 3000);

        });
    });