之后jQuery停止工作

Question

我有一个非常依赖于CSS3动画的页面。我正在创建一个脚本，它将成为那些没有CSS3动画的浏览器的后盾(看看你的IE.)。我创建了以下脚本，它将完成我所需的基本功能：

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

脚本的第一部分工作时没有问题(添加.hide类)。但在那之后什么都没发生。我被困住了，因为没有看到错误，而且我假设我的脚本中有错误。

下面是脚本的小提琴和其余的代码。

注:我不是很了解写JS和欢迎任何方式改进脚本，请提供例子。

小提琴注意： Firebug在运行小提琴时显示了几个错误。这些错误只出现在Fiddle页面上，我相信这些错误与jsFiddle有关，而不是我的代码或页面。

我正在尝试实现的

我想要的是，对于每一项(如类或id所列)，在延迟后淡出它们，然后在最后一个div中淡出，然后保持不变。

Answer 1

这会成功的，http://jsfiddle.net/VNfT2/2/。没有对addclass的回调。既然这么说了。啊！这不是正确的方法。提示:当你看到超过10 }时，一排排停下来深呼吸。:)

编辑:有数百个插件可以做到这一点(幻灯片)。但是，如果你想这样做的话，manually...look在这里：http://jsfiddle.net/VNfT2/5/：

Answer 2

请参阅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');
           });
          });   
         });
        });
       });
      });
     });
    });
});

正如我的注释所述，您可以使用字符串(类)或返回类的函数调用addClass。但你不能用字符串和函数.请参阅api.jquery.com/addClass

在回调函数中，应该使用$(this)，因为这样就不会再搜索元素了。

Answer 3

回调没有被调用的问题，因为它们是作为第二个参数提供的。

addClass( className )

描述:将指定的类(Es)添加到每组匹配的元素中。

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

以下是一些建议：

1)

尝试在另一个函数中只包含一个嵌套/回调函数。

请参阅技巧4，然后使用函数fadeElementsInThenOut作为示例。

2)

不要重复查找。

旧代码：

// 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");

新法典：

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

3)

使用$(this)在回调中引用相同的元素。

旧法典：

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

新法典：

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

4)

如果你不需要的话，不要使用回调。

旧法典：

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

新法典：

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

下面是您重新编写的代码以解决问题。

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