Question

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

我在容器div中有几个DIV，并希望动画它们按顺序滑入视图，就像旋转木马一样。

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

jsFiddle Demo

或for循环：

jsFiddle Demo

我猜这是因为：对象是单独动画的，但循环不等待一个动画在开始下一个动画之前完成。动画按顺序在几毫秒内开始，并在其进展中重叠。

如何修复？

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

jsFiddle Demo

必须有更好的方法。 只是一个WAG：也许是通过使用Promises接口？

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

}

Answer 2

在最后一张幻灯片结束后重复播放旋转木马非常有趣。请查看更新的小提琴链接：

https://jsfiddle.net/mvwndnv4/8/

希望这就是你要找的东西：

$('body').css({
  'background-color': 'lightblue'
});
var loop = 1;
var arr = [3, 1, 2];
var totalLength = $('.slide').length;
if (totalLength > 0) {
  setTimeout(function() {
    animateSlides(0)
  }, 3000);
}

function animateSlides(n) {

  if (n + 1 == totalLength) {
    $($('.slide')[0]).animate({
      left: 0
    }, 1500, function() {
      setTimeout(function() {
        animateSlides(0);
      }, 3000);
    });
  } else {
    $($('.slide')[n + 1]).animate({
      left: 0
    }, 1500, function() {

    });
  }

  $($('.slide')[n]).animate({
    left: '-100%'
  }, 1500, function() {

    $(this).css({
      'left': '100%'
    });
    if (n == totalLength - 1) {

    } else {
      n++;
      setTimeout(function() {
        animateSlides(n);
      }, 3000);
    }
  });
}

#slideshow {
  position: relative;
  width: 100%;
  height: 200px;
  XXoverflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide:not(:first-of-type) {
  left: 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.0/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>

如何单独为jQuery集合项设置动画

2 个答案: