Question

I have the following script:

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
        });
    });
});

The script works fine until step 3. Step 3 does not fade in the div as it is supposed too. Why is this script not working and how do I fix it?

What I am excepting:

Step 1: Content on Page Loads then Script Fires

Step 2: I have a splash screen that runs for approximately 9 seconds.

Step 3: After animation content-wrap div fades in.

HTML:

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

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

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

Note: Before I added the splash animation my JS looked like this which worked without issue:

 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

The demo page and your OP contain different code.

The JavaScript on your demo page is looking for #sp-container but your container is using class, not id. Should be .sp-container.