1

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

在这里摆弄换档按钮按我想要的方式工作。

谢谢。

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;
}
4

1 回答 1

1

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

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

于 2012-11-25T19:08:01.703 回答