jQuery分步动画

如何解决jQuery分步动画

| 我想让三个元素相继消失。

<span class=\"a\">Step 1</span>
<span class=\"b\">Step 2</span>
<span class=\"c\">Step 3</span>

这是我对

when()

和

done()

的JS尝试（另请参见http://jsfiddle.net/wU9Qf/）：

var step1 = $(\".a\").fadeIn(3000);
var step2 = function(){$(\".b\").fadeIn(3000);};
var step3 = function(){$(\".c\").fadeIn(3000);};

$.when(step1).done(step2);

我要逐步执行“ 4”（步骤1>步骤2>步骤3）-如何执行此操作？     

解决方法

        这是你在问什么吗？

$(\".a\").fadeIn(3000,function(){
    $(\".b\").fadeIn(3000,function(){
        $(\".c\").fadeIn(3000);
    });
});

    ,        如果使用的是jQuery 1.6，则另一个选择是使用新语法，该语法允许您对动画使用Deferred行为。例如：

$.when($(\'#foo\').animate({
    top: 100,left: 100
},3000)).pipe(function() {
    return this.animate({
        top: 0,left: 0
    },3000);
}).then(function() {
    console.log(\'done\');
});

这段代码将动画设置为“ 7”，然后在完成该动画后开始下一个动画。完成后，它将“完成”记录到控制台。如果要执行许多动画，这可能比执行多个嵌套的回调要干净。     ,        

$(\'span\').each(function(i,el){
  setTimeout(function(){
    $(el).fadeIn();
  },100*i);
});

在

$.each

内像这样使用

setTimeout

，可以按顺序对任意数量的元素进行动画处理。调整

100*i

以增加/减少动画之间的持续时间，并将obviously12ѭ设置为任何类型的动画，显然     ,        如果您有任何父元素，那么您还可以应用以下方法。 each（）函数用于遍历目标jQuery对象的每个元素。

 <div id=\"parent_div\">
                            <p class=\"none at_font\"><i class=\"fa fa-hand-o-right\"></i> Web Design And Development</p>
                            <p class=\"none at_font\"><i class=\"fa fa-hand-o-right\"></i> Android Development</p>
                            <p class=\"none at_font\"><i class=\"fa fa-hand-o-right\"></i> iFone Development</p>
                            <p class=\"none at_font\"><i class=\"fa fa-hand-o-right\"></i> Wordpress Development</p>
                            <p class=\"none at_font\"><i class=\"fa fa-hand-o-right\"></i> Website Clone</p>
                        </div>

           <button class=\"btn btn-default\" id=\"at_explorer\">Explorer</button>

           <script>
                $(\"#at_explorer\").click(function () {
                       $(\"#parent_div\").children().each(function (index) {
                            $(this).delay(500 * index).fadeIn(300);
                        });
                    });
                </script>

该博客包含所有褪色效果示例 http://www.alphansotech.com/blogs/jquery-fadein-fadeout-examples/