jquery - 在页面启动时使用 JQuery .load() 和 .hide() 和 .show()

Question

我正在使用以下代码来显示div页面启动：

$("#mydiv").hide().show("slow");

这将使div页面启动时出现缓慢的动画（页面加载/刷新）

但是，如果在页面启动时（页面加载/刷新），我想在动画开始之前将另一个文件中的 HTML 插入到这个文件中div，我会尝试这样做：

$("#mydiv").load("myPage.html");
$("#mydiv").hide().show("slow");

当我这样做时，动画在启动时不再起作用（页面加载/刷新）。如何从另一个文件加载 html 并且仍然在页面启动时动画工作（页面加载/刷新）？

Answer 1

$(document).ready(function(){  
  $('#mydiv').load('myPage.html', function() {
      $(this).show();
    });
});

在你的 CSS 添加

#mydiv { 
   display: none; 
}

Answer 2

最好使用 CSS 进行初始隐藏div

#mydiv { display: none }

然后你可以展示它

$("#mydiv").load("myPage.html", function() {
    $(this).show(600);
});

Answer 3

将 show 部分作为回调添加到负载：

$("#mydiv").hide().load("myPage.html", function(){
    $(this).show('slow');
});

Answer 4

我建议隐藏页面，加载内容然后显示 div。您可以简单地使用以下的第二个参数 ( complete) .load(url[, data][, complete])：

$('#myDiv').load('...', function() {
    // gets executed when the content is loaded
    $(this).show('slow');
});

Answer 5

我想出了一个办法。

你可以使用 ajax 做这样的事情：

$.ajax({
        url: "myPage.html",
        cache: false
    }).done(function (html) {
        $("#myDiv").append(html);
        $("#myDiv").hide().show("slow");
    });

这确保页面在动画开始之前被调用！