Question

我正在使用下划线从JSON文件中显示项目<li>的列表，而不是所有项目一次出现，我想一个接一个地淡出它们。我怎么能做到这一点？

for (var j=0; j<rc.length; j++) {


%> 
<ul>
  <li class="productTile" data-id="<%= rc[j].id %>">
    <img src="<%= image %>" alt=""/>
    <h3>Demo<%= rc[j]["name"] %></h3>
    <p><%= rc[j].price.formatted %></p>
  </li>
</ul>

<%

                }  
                           };
%>

Answer 1

循环时，一个接一个地显示你的li元素只是设置一个增加的超时：

var delay = 500;

for (var j=0; j<rc.length; j++) {
    setTimeout(function(){
      //fadeIn my <li>
    }, delay*j)
}

Answer 2

使用display: none样式一次创建所有div，然后使用库async编写如下内容：

// an array with all the ids
var ids = [...list of li ids...];

// handy async iterator
async.eachSeries(ids, fadeIdIterator, function(err){
  if(err){
    console.log('Something gone wrong');
  }
});

// this function will do the job for each element
function fadeInIterator(id, next){
  $('#'+id).fadeIn('slow', next);
}

您也可以使用jQuery编写所有内容，但使用此库编写异步内容要容易得多。

仅提供underscore - 唯一的选择：

function fadeInIterator(id){
  return function(next) { $('#'+id).fadeIn('slow', next); };
}

// an array with all the ids
var ids = [...list of li ids...];

// this array will hold the callbacks
var fades = _.map(ids, function(id){  return fadeInIterator(id); });

_(fades).reduceRight(_.wrap, function() { console.warn('done') })();

对于underscore异步备选方案，我看了here

使用下划线逐个淡化每个项目（li）

2 个答案: