1

我有以下脚本：

var $j = jQuery.noConflict();
$j(window).load(function () {
    $j('#loading').fadeOut('fast', function () { //Step 1
        $j("#sp-container").fadeIn("fast", function () { //Step 2
            $j("#content-wrap").delay(9000).fadeIn("slow"); //Step 3
        });
    });
});

该脚本在第 3 步之前工作正常。第 3 步也不会像预期的那样淡入 div。为什么这个脚本不起作用，我该如何解决？

我的例外是：

第 1 步：页面加载内容然后触发脚本

第 2 步：我有一个运行大约 9 秒的启动画面。

第 3 步：动画 content-wrap div 淡入后。

HTML：

<div id="loading"> 
  <!-- CONTENT --> 
</div>

<div id="sp-container">
  <!-- CONTENT --> 
</div>

<div id="content-wrap">
  <!-- CONTENT --> 
</div>

注意：在我添加启动动画之前，我的 JS 看起来像这样，没有问题：

 var $j = jQuery.noConflict();
$j(window).load(function() {
  $j('#loading').fadeOut('slow', function() {
          $j("#content-wrap").fadeIn("slow");    
      });
    });

这是相关页面的链接。

4

3 回答 3

2

演示页面和您的 OP 包含不同的代码。

您的演示页面上的 JavaScript正在寻找，#sp-container但您的容器正在使用class，而不是id. 应该是.sp-container。

于 2012-09-06T18:08:55.803 回答
0

尝试使用setTimeout()而不是延迟，并将最后 9000 毫秒的延迟动画包装在其中。

jsFiddle 演示

$('#loading').fadeOut('fast', function () { //Step 1
    $("#sp-container").fadeIn("fast", function () { //Step 2            
        setTimeout(function () { $("#content-wrap").fadeIn("slow"); }, 9000); //Step 3
    });
});​
于 2012-09-06T17:54:30.470 回答
-1

实际上加载事件文档说这有效，哈哈，学习经验:)

我认为您将ready()功能与load()功能混淆了。

转变：

$j(window).load(function() {

至

$j(document).ready(function() {
于 2012-09-06T17:33:18.210 回答