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。您只需使用.load(url[, data][, complete])的第二个参数（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");
    });

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

在页面启动时使用带有.hide（）和.show（）的JQuery .load（）

5 个答案: