在没有大量回调函数的情况下循环遍历列表元素上的相同动画

Question

我的目的是遍历每个列表元素，并在使用 marginLeft 将其向右移动 30 像素的同时将其动画化到视图中。我试图在每个动画之间延迟 6 秒。到目前为止，我只能获取第一个和第二个列表元素来执行此操作。我怎样才能让它在不使用一堆回调函数的情况下遍历每个列表元素？请注意，.animate-list class 是 .ul 元素。我还需要第一个列表元素在文档加载时出现，然后每个列表元素延迟 6 秒。

function doAnimate(){
    $(document).ready(function(){
                $('.animate-list li').css({
                    opacity:0,
                    marginLeft : '0px'
                });
    });

    $('.animate-list li:first-child').animate({
        opacity:1,
        marginLeft : '30px'
    },1000,'linear',function nextAnimate(){

    $(this).next('li').delay(6000).animate({
            opacity:1,
            marginLeft:'30px'
            },1000,'linear',function(){
            nextAnimate; // loop back to next 'li' ???
        });

    });
};

doAnimate();

Answer 1

使用计数器并让动画函数在完成每个项目后自行调用：

$(document).ready(function() {
  var i, list;

  list = $('.animate-list li');

  list.css({
    opacity: 0,
    marginLeft: '0px'
  });

  i = -1;
  animate();

  function animate() {
    if (++i < list.length) {
      list.eq(i).animate({
        opacity: 1,
        marginLeft: '30px'
      }, 1000, 'linear', animate);
    }
  }
});

<ul class="animate-list">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
  <li>Sixth</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

添加到 T.J。 Crowder 的回答，我能够使第一个列表元素在文档加载时出现，然后其余元素以 6 秒的延迟进行动画处理：

$(document).ready(function () {

    var i, list;

    list = $('.animate-list li');

    list.css({
        opacity: 0,
        marginLeft: '0px'
    });


    i = -1;
    animate();

    function animate() {
        if (++i < list.length) {
            if (i == 0) {
                list.eq(i).animate({
                    opacity: 1,
                    marginLeft: '30px'
                }, 1000, 'linear', animate);
            }
            else {
                list.eq(i).delay(6000).animate({
                    opacity: 1,
                    marginLeft: '30px'
                }, 1000, 'linear', animate);
            }
        }
    }
});

Answer 3

这可以通过以下组合来完成：

每个 LI 元素的 "fx" 队列生成的承诺
array.reduce() 以有效地创建包含所需动画序列的 .then() 链。

代码简洁，但如果您不熟悉 promises 会显得有些陌生：

$(document).ready(function(){
 //This function initiates an animation and returns a promise of its completion
 function anim(li) {
  return $(li).animate({
   opacity: 1,
   marginLeft: '30px'
  }, 1000, 'linear').delay(6000).promise();//.promise() generates a promise of completion of the animation
 }
 
 $('.animate-list li').css({ // initial CSS (hide)
  opacity: 0,
  marginLeft: '0px'
 }).get().reduce(function(p, li) {
  return p.then(function() {
   return anim(li);
  });
 }, $.when());//$.when() is a resolved promise to get the then() chain started.
});

<ul class="animate-list">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
  <li>Sixth</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

注意：没有乱七八糟的计数器！

.get() 是将 jQuery 集合转换为适当的 javascript 数组所必需的，从而使 .reduce() 可用。

从缩减函数返回 p.then(...) 具有逐步构建所需 .then() 链的效果。 nett 效果与 :

var lis = $(".animate-list li").get();

$.when().then(function() {
    anim(lis[0]);
}).then(function() {
    anim(lis[1]);
}).then(function() {
    anim(lis[2]);
})..... etc.

在没有大量回调函数的情况下循环遍历列表元素上的相同动画

Looping Through the Same Animation on List Elements Without Numerous Callback Functions

javascript

css

jquery

animation