Question

如何让李一个接一个地褪色？这是我的lis在同时向下滚动时淡入的链接，有没有办法让它们一个接一个地淡入？这是我的代码：

<script type="text/javascript">
 $(document).ready( function() {

 tiles = $('.ajax_block_product').fadeTo(0,0);

 $(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height() + 200;
        if (a < b) $(this).fadeTo(2500,1);
    });
 });

 function inWindow(s){
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var currentEls = $(s);
  var result = [];
  currentEls.each(function(){
    var el = $(this);
    var offset = el.offset();
    if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop +   windowHeight + 200))
      result.push(this);
  });
  return $(result);
}

inWindow('.ajax_block_product').fadeTo(0,1);

});
</script>

负责淡入的行是 - 如果（a＆lt; b）$（this）.fadeTo（2500,1）; 以下是链接，如果有帮助的话 - http://layot.prestatrend.com 感谢任何回复，伙计们！

Answer 1

你可以在每一个上设置一个.delay()设置为淡入淡出动画的持续时间乘以循环的索引，这样每个元素在动画制作之前会逐步等待：

if (a < b) $(this).delay(i * 2500).fadeTo(2500,1);

在if语句中，这可能会在动画之间产生间隙，因此您可以设置另一个计数器变量：

var count = 0;
tiles.each(function(i) {
    a = $(this).offset().top + $(this).height();
    b = $(window).scrollTop() + $(window).height() + 200;
    if (a < b) {
        $(this).delay(count * 2500).fadeTo(2500,1);
        count++;
    }
});

如果您想变得复杂，那么您可以创建每个.promise()函数调用的fadeTo()对象，该对象在fadeTo()的回调函数中得到解析。然后，您可以使用$.when()在完成后运行下一个动画。

Answer 2

理想情况下，将第二个作为回调函数的衰落设置为第一个的淡入淡出：

if (a < b) $(this).fadeTo(2500,1, function(){
    // fade the other element in here
});

Answer 3

那个样本

showthem ($('.showus'),0);

function showthem(them,ind) {
    if (ind>=them.length) {return;}
    $(them[ind]).show(5000,function() {showthem(them,ind+1);})
    console.log(them[ind],ind);
    a=them;
}

你可以在这里玩它： http://jsfiddle.net/4pkmt/1/

一个接一个地淡入淡出

3 个答案: