javascript – jQuery动画,链接,.each()和.animate()(或fadeIn()和fadeOut())

我今天试图解决这个问题时遇到了一些麻烦,我想在我的DOM中创建5个项目(在相同的属性元素下列出,$(‘.elements’))淡入淡出,之后阅读API我认为.each()将是一个很棒的想法,实现淡入和淡出展示画廊.

但是,我目前正在使用：

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

但是一切都会立刻消失.

我如何进行连续效果,其中所有内容都链接在一起,它从列表中的第一项开始(a.k.a – $(‘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/

更新以使其无限循环.

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

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

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