0

我有一个严重依赖 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 的编写不是很了解，欢迎任何改进脚本的方法，请提供示例。

FIDDLE NOTE Firebug 在运行 fiddle 时显示了几个错误。这些错误仅在 Fiddle 页面上，我相信与 jsFiddle 相关，而不是我的代码或页面。

我试图实现的目标

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

4

3 回答 3

2

这将起作用，http://jsfiddle.net/VNfT2/2/。addclass 没有回调。话说回来。啊啊啊！！！！！！这不是正确的做法。提示：当你看到超过 10 个 }); 连续，停下来，深呼吸。:)

编辑：有数百个插件可以做到这一点（google for jquery slideshow）。但是，如果你想手动做......看看这个：小提琴：http: //jsfiddle.net/VNfT2/5/

于 2012-09-09T00:36:37.417 回答
1

见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)，它更快，因为这样你就不会再次搜索元素。

于 2012-09-09T00:40:56.900 回答
1

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

addClass( className )

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

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

以下是一些提示：

1)

尝试在另一个函数中仅包含 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');
    });
});
于 2012-09-09T00:57:28.233 回答