jQuery之后停止工作

Question

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:

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

The first part of the script works without issue (adding the class of .hide ). 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.

Here is a fiddle of the script with the rest of the code.

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

FIDDLE NOTE 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.

What I am attempting to Achieve

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.

Answer 1

This will work, http://jsfiddle.net/VNfT2/2/ . There is no callback for addclass. Having said that. AHHH!!!!!! This is NOT the right way to do it. Hint: When you see more than 10 }); in a row, stop and take a deep breath. :)

Edit: There are hundreds of plugins to do this (google for jquery slideshow). But, if you want to do it manually...look at this: fiddle: http://jsfiddle.net/VNfT2/5/

Answer 2

See http://jsfiddle.net/VNfT2/4/

 var $j = jQuery.noConflict();

 $j(document).ready(function() {
//Hide All Elements
    $j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright")
        .addClass("hide")
//Change Color of "Frames"
        .addClass("color");
//Frame 1
    $j(".frame-1").fadeIn("slow", function() {
     $j(this).delay(3000).fadeOut('slow', function() {
//Frame 2
      $j(".frame-2").fadeIn("slow", function() {
       $j(this).delay(3000).fadeOut('slow', function() {
//Frame 3        
        $j(".frame-3").fadeIn("slow", function() {
         $j(this).delay(3000).fadeOut('slow', function() {
//Frame 4
          $j(".frame-4").fadeIn("slow", function() {
           $j(this).delay(3000).fadeOut('slow', function() {
//Tile
            $j(this).fadeIn('slow');
           });
          });   
         });
        });
       });
      });
     });
    });
});

As I said im my comment, you can call addClass with a string (the class) or with a function which return the class. But you can't do it with a string and a function... See api.jquery.com/addClass

And in your callback functions you should use $(this) , it's faster because this way you don't search the element again.

Answer 3

The problem that your callbacks aren't called since they're supplied as the second argument.

addClass( className )

Description: Adds the specified class(es) to each of the set of matched elements.

.addClass( className )
.addClass( function(index, currentClass) )

Here are some tips:

1)

Try to only have 1 nested/callback function inside another function.

Refer to tip 4, then function fadeElementsInThenOut for an example.

2)

Don't repeat lookups.

Old code:

// Let's forget about the callbacks for now
$j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright").addClass("hide");
$j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color");

New Code:

$j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color hide");
$j("#tile-wrap, #copyright").addClass("color");

3)

Use $(this) to reference the same element within a callback.

Old Code:

$j(".frame-4").fadeIn("slow", function () {
    $j('.frame-4').delay(3000).fadeOut('slow', function () {
        //...
    });
});

New Code:

$j(".frame-4").fadeIn("slow", function () {
    $j(this).delay(3000).fadeOut('slow', function () {
        //...
    });
});

4)

Don't use a callback if you don't have to.

Old Code:

$j(".frame-4").fadeIn("slow", function () {
    $j(this).delay(3000).fadeOut('slow', function () {
        //...
    });
});

New Code:

$j(".frame-4").fadeIn("slow").delay(3000).fadeOut('slow', function () {
    //...
}); 

Here's your code rewritten to fix the problems.

var $j = jQuery.noConflict();
$j(function () {
    var frames = [ ".frame-4", ".frame-3", ".frame-2", ".frame-1" ];
    var fadeElementsInThenOut = function( els, lastCallback ){
        var el = els.pop();
        if( el ){
            $j(el).fadeIn("slow").delay(3000).fadeOut('slow', function(){
                fadeElementsInThenOut( els, lastCallback );
            });
        }else{
            lastCallback();
        }
    };

    $j( frames.join( ", " ) ).addClass("color hide");
    $j("#tile-wrap, #copyright").addClass("color");
    fadeElementsInThenOut( frames, function(){
        $j('#tile-wrap').fadeIn('slow');
    });
});