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

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

＆＃13;

$(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);
    }
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

加入T.J.克劳德的答案，我能够使文档加载时第一个列表元素出现，然后其余的动画延迟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.

在没有众多回调函数的列表元素上循环使用相同的动画

3 个答案: