在Jquery中使用interval附加div

嗨我需要有关附加div的帮助，同时通过2个循环使用2种类型的速度间隔

这是我的示例代码

 $(document).ready(function() { for (var i = 0; i <= 300; i++) { $(".wrapper").append("
" + i + "
"); if (i==300) { //I need this for loop to slow down my //interval so div will display slower compared to the first 300 for (var i = 300; i <= 500; i++) { $(".wrapper").append("
" + i + "
"); }; } }; }); var step = 0; function hideItemFunc() { var interval = setInterval(function() { $("#" + step).animate({ opacity: 1 }, 50); step += 1; }, 50); }  

Answer 1

我用两个interval()来完成它…但是有一个函数。

并使用一些变量来控制迭代和延迟（或速度）。

看看当它达到300时它会变慢。

 $(document).ready(function(){ var intervalSpeed = 20 // in milliseconds var ratio_1=1; // 1 is 100% of the above delay var ratio_2=10; var animateSpeed=300; // in milliseconds var i=0; function twoSpeedInterval(){ // Append. $(".wrapper").prepend("
" + i + "
"); // Animate. $("#" + i).animate({opacity: 1},animateSpeed); // Condition to slow or stop. if (i==300){ clearInterval(interval_1); // Stop the 1st interval. // Start 2nd interval. interval_2 = setInterval(twoSpeedInterval,intervalSpeed*ratio_2); animateSpeed = animateSpeed*ratio_2; } if (i==500){ clearInterval(interval_2); // Stop the 2nd interval. } i++; } // Start 1st interval. var interval_1 = setInterval(twoSpeedInterval,intervalSpeed*ratio_1); var interval_2; }); 

 .item{ opacity:0; } 

Answer 2

只是对它有点乐趣，我使用了jQuery .queue() ，并使i成为一个全局变量。

 var i = 0; $(document).ready(function() { for (i = 0; i <= 300; i++) { $(".wrapper").append("
" + i + "
"); } for (j = 300; j <= 500; j++) { $(".wrapper").delay(1000).queue(function(next) { $(this).append("
" + i + "
"); i++; next(); }); } }); var step = 0; function hideItemFunc() { var interval = setInterval(function() { $("#" + step).animate({ opacity: 1 }, 50); step += 1; }, 50); } 

Answer 3

如前所述，

您将不得不使用带有计时器的递归来添加循环延迟。

您可以将此JSFiddle作为示例进行检查，或使用以下代码段进行调试：

注意：请注意count%3 === 0每个值的延迟差异。

 var count = 0; function animate(delay) { setTimeout(function() { var div = $('
'+count+'
'); $('.content').append(div) div.fadeIn() if (++count < 10) { animate(count % 3 === 0 ? 3000 : 1000) } }, delay || 1000) } animate(); 

 .tile { height: 40px; margin: 5px; border: 2px solid #ddd; border-radius: 4px; background: #eee; }