1）

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类）。但是在那之后没有任何事情发生或起作用我被困了，因为没有看到任何错误，我认为我的脚本中有错误。

以下是脚本的fiddle及其余代码。

注意：我不太了解编写JS并欢迎任何改进脚本的方法，请提供示例。

FIDDLE NOTE Firebug在运行小提琴时显示一些错误。这些错误仅在Fiddle页面上，我相信与jsFiddle有关，而不是我的代码或页面。

我想要实现的目标

我想要的是每个项目（按类或id列出）是淡入它们然后在延迟后将它们淡出然后淡入最后一个div并保持不变。

Answer 1

这将有效，http://jsfiddle.net/VNfT2/2/。 addclass没有回调函数。话说回来。 AHHH !!!!!!这不是正确的方法。提示：当你看到超过10}）;连续停下来深吸一口气。：）

编辑：有数百个插件可以执行此操作（google for jquery slideshow）。但是，如果你想手动完成它......看看这个：小提琴：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 )

描述：将指定的类添加到每组匹配的元素中。

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

jQuery停止工作

3 个答案:

1）

2）

3）

4）