jQuery stops working after
<p>I have a page which relies heavily on CSS3 animations. I am in the process of creating a script that will be the fallback that will work for those browsers that do not have CSS3 animations (looking at you IE...). I created the following script that will do the basic of what I need: </p>

<pre><code>var $j = jQuery.noConflict();
$j(document).ready(function() {
    //Hide All Elements to Fade Them In
    $j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright").addClass("hide", function() {
        //Change Color of "Frames"
        $j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color", function() {
            //Frame 1
            $j(".frame-1").fadeIn("slow", function() {
                $j('.frame-1').delay(3000).fadeOut('slow', function() {
                    //Frame 2
                    $j(".frame-2").fadeIn("slow", function() {
                        $j('.frame-2').delay(3000).fadeOut('slow', function() {
                            //Frame 3       
                            $j(".frame-3").fadeIn("slow", function() {
                                $j('.frame-3').delay(3000).fadeOut('slow', function() {
                                    //Frame 4 
                                    $j(".frame-4").fadeIn("slow", function() {
                                        $j('.frame-4').delay(3000).fadeOut('slow', function() {
                                            //Tile
                                            $j('#tile-wrap').fadeIn('slow');
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});​
</code></pre>

<p>The first part of the script works without issue (adding the class of <code>.hide</code>). But nothing after that fires or works. I am stuck because no errors are seen and I assume I have an error in my script. </p>

<p>Here is a <a href="http://jsfiddle.net/Lynda333/VNfT2/1/" rel="nofollow">fiddle</a> of the script with the rest of the code.</p>

<p>Note: I am not very knowledgeable of writing JS and welcome any ways to improve the script, please provide examples. </p>

<p><em><strong>FIDDLE NOTE</em></strong> Firebug shows a couple errors when running the fiddle. These errors are only on the Fiddle page and I believe are related to the jsFiddle not my code or page. </p>

<p><em><strong>What I am attempting to Achieve</em></strong></p>

<p>What I want is for each item (as listed by class or id) is to fade them in then fade them out after a delay then fade in the last div and it stays. </p>
