Question

我有一个简单的例子，有几个框可以在屏幕上移动。在前一个框完成之前，每个框都不应移动。我有一个使用.shift()的工作解决方案但我应该能够使用for循环和$.each来迭代这个。任何人都知道如何让for和$.each工作？

fiddle here按钮按照我希望的方式工作。

感谢。

JS：

boxes = [
  ['.box0', 'animate', [ {left: '200px' }, 1000 ] ],
  ['.box1', 'animate', [ {left: '200px' }, 1000 ] ],
  ['.box2', 'animate', [ {left: '200px' }, 1000 ] ],
  ['.box3', 'animate', [ {left: '200px' }, 1000 ] ],
  ['.box4', 'animate', [ {left: '200px' }, 1000 ] ],
  ['div', 'animate', [ {left: '0px' }, 1000 ] ]
];
$('.eachMethod').click(animEach);
$('.ifMethod').click(animFor);
$('.shiftMethod').click(animShift);
function animEach(){
  $.each(boxes, function(){
    $.fn[this[1]].apply($(this[0]), this[2]).promise().done();
  });
};
function animFor(){
  for (i=0; i < boxes.length; i++) {
    b=boxes[i];
    $.fn[b[1]].apply($(b[0]), b[2]).promise().done();
  }
};
function animShift(){
  b = boxes.shift();
  if (b) {
    $.fn[b[1]].apply($(b[0]), b[2]).promise().done(animShift);
  }
};

HTML：

<ul>
  <li><button class='eachMethod'>$.each</button></li>
  <li><button class='ifMethod'>if</button></li>
  <li><button class='shiftMethod'>shift</button></li>
</ul>
<div class='box0'></div>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>

CSS：

div{
 clear: both;   
 background-color: green;
 width: 40px;
 height: 40px;
 Position: relative;    
}
ul li {
  float: left;
}

Answer 1

animate()是异步的，因此循环将在几毫秒内完成，几乎同时调用每个元素上的动画。使用循环时，.promise().done()没有做任何事情。

使用animShift()的版本仅将动画一次应用于一个元素，并且由于下一个调用在done()内，因此在第一个动画完成之前不会触发

Javascript和jQuery：遍历数组但等待动画完成

1 个答案: