Question

我有以下脚本：

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：动画内容换行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");    
      });
    });

Here is a link to the page in question.

Answer 1

demo page和您的OP包含不同的代码。

your demo page上的JavaScript正在寻找#sp-container，但您的容器正在使用class，而不是id。应该是.sp-container。

Answer 2

尝试使用setTimeout()代替延迟，并将最后9000ms延迟动画包装在其中。

jsFiddle DEMO

$('#loading').fadeOut('fast', function () { //Step 1
    $("#sp-container").fadeIn("fast", function () { //Step 2            
        setTimeout(function () { $("#content-wrap").fadeIn("slow"); }, 9000); //Step 3
    });
});

Answer 3

实际上load-event文档说这是有效的，哈哈，学习经验:)）

我认为您错误地将ready()函数误认为load()函数。

切换：

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

到

$j(document).ready(function() {

FadeIn脚本不起作用？

3 个答案: