Question

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

这是我的示例代码

<script type="text/javascript">
    $(document).ready(function() {
     for (var i = 0; i <= 300; i++) {
        $(".wrapper").append("<div class='item' id='" + i + "'>" + i + "</div>");
        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("<div class='item' id='" + i + "'>" + i + "</div>");
              };
        }
      };

    });
    var step = 0;

    function hideItemFunc() {
      var interval = setInterval(function() {
        $("#" + step).animate({
          opacity: 1
        }, 50);
        step += 1;
      }, 50);
    }
</script>

Answer 1

我使用两个interval()来完成它......但是有一个功能。

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

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

＆＃13;

$(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("<div class='item' id='" + i + "'>" + i + "</div>");

    // 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;
});

＆＃13;

.item{
  opacity:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper"></div>

＆＃13;

Answer 2

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrapper"></div>

Answer 3

如前评论，

你必须使用带有计时器的递归来在循环中添加延迟。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="content"></div>

＆＃13;

在Jquery中使用interval添加div

3 个答案: