Question

我有一堆＆lt; li>我想要一个接一个地制作动画的元素，所以我正在做的是以下内容：

<script type="text/javascript">
var i=-1;
var items = $('li');
animateAll();

animateAll（）函数就像这样

function animateAll(){
  i++;
  if(i<items.length){
   var cual=items[i];
   $(cual).css("position", "absolute");
   var xPos=0;//to set the horizontal position
   var yPos=0;//vertical position
   var xInicial=$('#rec_int').position().left;//initial x position
   var xFinal=xInicial+$('#rec_int').innerWidth();
   var yInicial=$('#rec_int').position().top;
   var yFinal=yInicial+$('#rec_int').innerHeight();
   xPos=randomXToY(xInicial,xFinal);
   yPos=randomXToY(yInicial,yFinal);
   $(cual).css("top",xPos).css("left", yPos);
   $(cual).delay(1000).animate({
   left: parseInt($(cual).css('left'),10) == 0 ?    -$(cual).outerWidth() :0,
   top: parseInt($(cual).css('top'),10) == 0 ? -$(cual).outerHeight() : 0
   },1000,animateAll());
}

问题在于所有＆lt; li>在延迟1秒后动画，同时进行动画制作。我想要实现的是首先移动第一个“＆lt; li＆gt;”然后第二个等等。希望有人可以提供帮助

Answer 1

因为你也抓住了所有物品。我建议你从第一个li开始使用它：

var start = $('li:first-element');

第二步是使您的函数递归，以便它自己重复，直到处理列表中的所有兄弟节点。该功能在到达最后一个时停止

var start = $('li:first-element');
var currentSibling = start;

function animateAll() {
  //First the delay
  //Do something with the sibling in this area

  //If not last child, repeat and goto next sibling
  if(currentSibling != $('li:last-child')) {
    currentSibling = currentSibling.nextSibling;
    animateAll(); //Recursive
  }
}

Answer 2

您需要更改延迟，因为您将每个延迟延迟1秒，它们将同时生成动画。

有很多方法可以解决这个问题。

根据您的设置，最简单的方法是使用$(cual).delay(1000*i).animate({...
在我看来，更好的解决方案是使用回调来发出下一个动画。然后你甚至不会有延迟。相反，下一个动画将在它完成之前立即触发。
您可以尝试在ul / ol父级上使用jquery queue()。

在动画之间暂停

2 个答案: