0

我只是在构建一个小游戏，所以我加载了第一页（介绍）然后，我需要立即开始加载第二页（游戏的第一级，但只是加载，不显示它），然后等待用户单击以显示它..

这是我现在的代码：

在我的 html 页面中：

<body id="loadlevel">

在我的 JS 页面中：

var level1 = "level1.html";
$("#loadlevel").load(level1).fadeIn("slow");

但它会立即显示加载的页面！..

如何加载下一页然后等待用户输入显示加载的页面？..

我虽然使用 JQuery hide() 和 show()，但是 hide() 会隐藏整个页面（也是当前页面）；）

4

3 回答 3

3

创建一些不可见的字段并加载数据。

<div id="temp" style="display:none;"></div>

然后在 JS

var level1 = "level1.html";
$("#temp").load(level1);

和

$('#start').click(function(){
   $('#main').html($('#temp').html());
});
于 2012-12-05T18:23:06.750 回答
0

您最好的选择是拥有一个最初用 css 或 jquery 隐藏的主 div，然后将内容加载到那里并淡入。

于 2012-12-05T18:24:05.280 回答
0

.load()- 从服务器加载数据并将返回的 HTML 放入匹配的元素中。

每当要发送 Ajax 请求时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。如果没有进行中，jQuery 会触发 ajaxStart 事件。此时会执行已使用 .ajaxStart() 方法注册的所有处理程序。

CSS：

.get-in{
   background:white;
   position:absolute; // or fixed
   left:0;
   top:0;
   width:100%;
   height:100%;
}

jQuery：

$('#loadlevel').ajaxStart(function() {
  $('<div/>').appendTo('body').addClass('get-in');
});

$('.get-in').on('click', function(){
   $(this).fadeOut("slow");
});
于 2012-12-05T18:33:24.573 回答