jQuery一步一步动画

我想要三个元素一个接一个地淡入淡出。jQuery一步一步动画

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

这里是我JS尝试与when()和done()（见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>第2步>步骤3） - 我该怎么办做这个？

来源

2011-05-27 l2aelba

这是你在问什么？

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

来源

2011-05-27 11:57:08 Joakim

是！我忘了这个 – l2aelba 2011-05-27 11:58:57

+1 :-) \ *删除自己的答案\ * – Tomalak 2011-05-27 11:59:29

另一种选择是，如果您使用的是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，那么当动画完成，下一个开始。完成后，它将“完成”记录到控制台。如果你有很多动画要做，这可能比做多个嵌套回调要干净。

来源

2011-05-27 12:17:08 lonesomeday

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

使用setTimeout这样的$.each内让你的动画，以元件的任意量。调整100*i以增加/减少动画之间的持续时间，并将$(el).fadeIn();设置为任何类型的动画，显然

来源

2011-07-28 02:16:33

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

来源

2015-12-25 10:24:35

jQuery一步一步动画

回答

相关问题