jQuery动画，链接，.each（）和.animate（）（或fadeIn（）和fadeOut（）） [英] jQuery Animation, Chaining, .each() and .animate() (or fadeIn() and fadeOut())

问题描述

我今天想解决这个问题时遇到了一些麻烦，我想在我的DOM（在同一个实体元素下面列出的$（'。elements'））中制作5个项目，淡入淡出，然后在阅读了API之后，我认为.each（）将是一个神话般的想法来实现淡入淡出展示库。

然而，我'm正在使用：

  $（'。elements'）。each（function（）{
 $（this ）.fadeIn（2000）.delay（200）.fadeOut（2000）.show（）; 
}）
  

$

我如何做一个连续的效果，其中一切都链接在一起，它从第一个项目开始在列表中（也就是 - $（'elements'）。eq（0）？）到最后一个，然后重新启动？

我真的需要一个while循环在JavaScript / jQuery中做到这一点？我希望有一个类似的功能，我可以链接jQuery来减少负载和文件大小。

另外，有没有办法限制图像溢出从我的div？

解决方案

 （function loop（）{
 $ （'.elements'）。each（function（）{
 var $ self = $（this）; 
 $ self.parent（）。queue（function（n）{
 $ self .fadeIn（2000）.delay（200）.fadeOut（2000，n）; 
}）; 
}）。parent（）。promise（）。done（loop）; 
} （））; 
  

演示： http://jsfiddle.net/uWGVN/2/

已更新，让它无限循环。

---

第二次更新：另一种可能更具可读性的方法：

 （函数fade（idx）{
 var $ elements = $（'。elements'）; 
 $ elements.eq（idx）。 fadeIn（2000）.delay（200）.fadeOut（2000，function（）{
 fade（idx + 1< $ elements.length？idx + 1：0）; 
}）; 
}（0））; 
  

演示： http://jsfiddle.net/uWGVN/3/

I'm having a bit of a trouble trying to figure this out today, i want to make 5 items inside my DOM (which is listed under the same attribute element, $('.elements')) fade in and out, and after reading up a bit on the API i thought .each() would be a fabulous idea to implement a fade in and fade out showcase gallery.

However, i'm currently using:

$('.elements').each(function() {
    $(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})

but everything gets faded in and out at once.

How do i do a sequential effect where everything is chained together and it starts from the first item in the list (a.k.a - $('elements').eq(0)?) down to the last one, and then restarts again?

Do i really need a while loop to do this in javascript/jquery? I was hoping there would be a similar function that i could chain for jQuery to perform to reduce load and filesize.

Also, is there a way to restrict the images from overflowing out from my div?

解决方案

(function loop() {
  $('.elements').each(function() {
    var $self = $(this);
    $self.parent().queue(function (n) {
      $self.fadeIn(2000).delay(200).fadeOut(2000, n);
    });
  }).parent().promise().done(loop);
}());

demo: http://jsfiddle.net/uWGVN/2/

updated to have it looping without end.

---

2nd update: a different, probably more readable, approach:

(function fade(idx) {
  var $elements = $('.elements');
  $elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function () {
    fade(idx + 1 < $elements.length ? idx + 1 : 0);
  });
}(0));

​demo: http://jsfiddle.net/uWGVN/3/

这篇关于jQuery动画，链接，.each（）和.animate（）（或fadeIn（）和fadeOut（））的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！