使用下劃線逐個淡化每個項目（li）

Question

我使用下劃線從JSON文件中顯示項目<li>的列表，而不是一次顯示它們，我希望逐個淡入淡出。我怎麼能做到這一點？

var delay = 500; 

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

Answer 1

騎自行車時，顯示陸續只是設置一個增加超時您li元素一個

：

// 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 -only替代：

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

Answer 2

創建所有display: none風格的一次DIV以外所有，然後使用庫async寫一樣的東西：

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> 

<% 

       } 
          }; 
%>