jquery - 如何单独对 jQuery 集合项进行动画处理

Question

对 jQuery 对象集合进行动画处理似乎是将它们作为一个组一起进行动画处理，而不是单独进行动画处理。

我在容器 div 内有一些 DIV，希望将它们设置为动画以按顺序滑入 View ，就像轮播一样。

无论我使用 $.each() 方法，都会发生这种情况:

jsFiddle Demo

或者一个for循环:

jsFiddle Demo

我猜测这是因为:对象是单独动画的，但循环不会等待一个动画完成后再开始下一个动画。动画按顺序启动，彼此相隔几毫秒，并且在进展过程中重叠。

如何解决这个问题？

我尝试添加延迟 as recommended here ，但结果并不理想。

jsFiddle Demo

一定有更好的方法。 只是一个 WAG:也许通过使用 Promises 接口(interface)？

$('.slide').each(function(){
	$(this).animate({
		left : 0
	},1500);
});

/*
for (var n=0; n < $('.slide').length; n++){
	$($('.slide')[n]).animate({
		left: 0
	},1500);
}
*/

/*
$('.slide').each(function(i){
	d =(i)*500;
	$(this).delay(d).animate({
		left : 0
	},1500);
});
*/

#slideshow{position:relative;width:100%;height:200px;overflow:hidden;}
.slide{position:absolute;top:0;left:100%;width:100%;height:100%;}
img{width:100%;height:100%;}
#s1{background-color:pink;}
#s2{background-color:palegreen;}
#s3{background-color:wheat;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
	<div id="s1" class="slide">
		<h2>Slide One</h2>
		<img src="http://placekitten.com/500/150" />
	</div>
	<div id="s2" class="slide">
		<h2>Slide Two</h2>
		<img src="http://placekitten.com/502/150" />
	</div>
	<div id="s3" class="slide">
		<h2>Slide Three</h2>
		<img src="http://placekitten.com/498/150" />
	</div>
</div>

Answer 1

请查看以下方法:

https://jsfiddle.net/br0d1tcn/5/

这里我们为每张幻灯片逐一调用动画函数:

var totalLength = $('.slide').length;
if (totalLength > 0) {
  animateSlides(0);
}

function animateSlides(n) {
  $($('.slide')[n]).animate({
    left: 0
  }, 1500, function() {
    if (n < totalLength - 1) {
      n++;
      animateSlides(n);
    }
  });

}