Question

JS：

$(function(){
 chainAnim('.section','slow','1')  });
 function chainAnim(e,s,o) {
        var $fade = $(e);
        var code = "console.log('Done.');";
        $fade.each(function(){
   code = "$('#"+$(this).attr('id')+"').fadeTo('"+s+"','"+o+"',function(){"+code+"});";
        });
        eval(code);
}

HTML：

 <div id="wrapper">
  <div class="section" id="section-1">Section 1</div>
  <div class="section" id="section-2">Section 2</div>
  <div class="section" id="section-3">Section 3</div>
  <div class="section" id="section-4">Section 4</div>
 </div>

动画制作时，第4部分首先进行动画处理。我该怎么扭转这个？

Answer 1

这应该做你想要的，但我摆脱了你的eval()代码。不知道你为什么采取这种方法。

示例： http://jsfiddle.net/wqWE5/

我还将第二个参数从"slow"更改为800，因此可以在.delay()中使用。

您传递的持续时间乘以.each()的当前索引将使动画按顺序发生。

$(function(){
     chainAnim('.section',800,'1');
});

function chainAnim(e,s,o) {
        var $fade = $(e);
        var code = function() {console.log('Done.');};
        $fade.each(function( i ){
            $(this).delay(i * s).fadeTo(s,o,code);
        });
}

Answer 2

当然第4节首先是动画，因为“code”设置为循环中的最后一个;）

代码在每个循环周期都被覆盖，你应该在循环中使用+ =而不是=。

无论如何，你的方法不是最佳做法，请查看：

编辑：递归淡化！

$(document).ready(function() {
 chainAnim($('.section'), 'slow', 1);
});

function chainAnim(e, s, o) {
  e = $.makeArray(e);
  if(e.length == 0) { return; }
  $(e.shift()).fadeTo(s, o, function() {
    console.log('Done.');
    chainAnim(e, s, o);
  });
}

演示：http://jsfiddle.net/97dEc/3/

Answer 3

为什么不用延迟（）

来偏移fadeIn（）

$('#wrapper .section').each(function(i){
    $(this).delay(i*site.rate).fadeIn(site.rate);
});

要反转它们，只需执行

$('#wrapper .section').each(function(i){
  var c = $('#wrapper .section').length;
  $(this).delay( (c-i) *site.rate).fadeIn(site.rate);
});

Jquery从上到下依次淡出

3 个答案: