Question

我需要追加10个div，并增加动画效果。我需要他们一个接一个地出现。我有这个代码

$('#bluebutton').click(function() {
  for (var i = 0; i < 10; i++) {
    var t = $('<div/>')
    t.css('background-color', 'blue');
    t.css('float', 'left');
    t.css('border', '1px solid white');
    t.appendTo(gallery);      

    t.animate({
      width: 100,
      height: 100
    }, 400, function() {
      // Animation complete.
    });
  }
});

但所有10个div都在一起追加。更新：添加完整回调。

Answer 1

$('#bluebutton').click(function() {
  appendBlock(0,10);
});

function appendBlock(number,maxBlocks) {
  if (number <= maxBlocks) {
    var t = $('<div/>')
    t.css('background-color', 'blue');
    t.css('float', 'left');
    t.css('border', '1px solid white');
    t.appendTo(gallery);      
    t.animate({
      width: 100,
      height: 100
    }, 400, function() {
      appendBlock((number+1),maxBlocks);
    });
  }
}

Answer 2

您可以使用完成回调：

var gallery = $("#gallery");
$('#bluebutton').click(function() {
  var i = 0;

  addDiv();

  function addDiv() {
    var t = $('<div/>')
    t.css('background-color', 'blue');
    t.css('float', 'left');
    t.css('border', '1px solid white');
    t.appendTo(gallery);      
    ++i;
    t.animate({
      width: 100,
      height: 100
    }, 400, i < 10 ? addDiv : $.noop);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="bluebutton" value="Click me" type="button">
<div id="gallery"></div>

注意最后一点：i < 10 ? addDiv : $.noop。 $.noop是jQuery提供的函数，它不执行任何操作，因此它的作用是：“如果i小于10，则在动画完成时调用addDiv。”

Answer 3

正如其他人所说的那样，动画回调非常适合您的需求，但另一种方法是将其保持在for循环中，就像您现在拥有的那样，只需添加setTimeout()即可。元素被附加......

$('#bluebutton').click(function() {
    for (var i = 0; i < 10; i++) {
        setTimeout(function() {
            var t = $('<div/>')
            t.css('background-color', 'blue');
            t.css('float', 'left');
            t.css('border', '1px solid white');
            t.appendTo(gallery);      
            t.animate({
                width: 100,
                height: 100
            }, 400);
        }, i * 400);
    }
});

如何等待jQuery完成的动画？

3 个答案: