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

Question

  我正在尝试用于.load加载新的 html 页面，但我想在新的 html 加载之前淡入覆盖当前内容的全宽全高div。使用我当前的代码，加载是瞬时的（不等待白色 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" );
   });
});

标签： jquery

Answer 1

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

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

        });
    });