Question

我希望三个元素一个接一个地淡出。

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

我想逐步fadeIn()（步骤1＆gt;步骤2＆gt;步骤3） - 我该怎么做？

Answer 1

这是你要问的吗？

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

Answer 2

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

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

此代码设置动画#foo，然后当该动画完成时，下一个动画开始。当那个完成后，它会将“完成”记录到控制台。如果你有很多动画要做，这可能比做多个嵌套回调更清晰。

Answer 3

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

在setTimeout内使用$.each这样的100*i可以让您按顺序为任意数量的元素制作动画。调整$(el).fadeIn();以增加/减少动画之间的持续时间，并将{{1}}设置为任何类型的动画，显然

Answer 4

如果您有任何父元素，那么您也可以应用以下方法。 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/

jQuery一步一步的动画

4 个答案: