在没有大量回调函数的情况下在列表元素上循环播放同一动画

Question

我这样做的目的是遍历每个列表元素并将其动画化到视图中，同时使用marginLeft将其向右移动30px。我试图在每个动画之间获得6秒的延迟。到目前为止，我只能获得第一个和第二个列表元素来执行此操作。如何使它在不使用一堆回调函数的情况下遍历每个列表元素？注意，.animate-list类是.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"队列生成的promise
• array.reduce()来有效地创建包含所需动画序列的.then（）链

代码很简洁，但如果你不熟悉承诺，它看起来会有点陌生：

$(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()链的效果。净效应与相同

var lis = $(".animate-list li").get();
$.when().then(function() {
    anim(lis[0]);
}).then(function() {
    anim(lis[1]);
}).then(function() {
    anim(lis[2]);
})..... etc.