javascript - jQuery 动画、链接、.each() 和 .animate()（或 fadeIn() 和 fadeOut()）

Question

我今天在尝试解决这个问题时遇到了一些麻烦，我想让我的 DOM 中的 5 个项目（列在相同的属性元素 $('.elements') 下）淡入淡出，然后在 API 上阅读一些我认为 .each() 将是实现淡入淡出展示画廊的绝妙想法。

但是，我目前正在使用：

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

但一切都会立即淡入淡出。

我如何做一个顺序效果，其中所有内容都链接在一起，它从列表中的第一项（又名 - $('elements').eq(0)?）开始到最后一项，然后再次重新启动？

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

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

Answer 1

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

Answer 2

您可以添加回调

官方文档：

('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

并使用 i++ et $('.elements').eq(i) 调用相同的函数

http://jsfiddle.net/dFnNL/

Answer 3

为了你的溢出，用 CSS 设置它的样式：

div.(class) { position:relative; overflow:hidden; }

Answer 4

美丽的方式：

(function hideNext(jq){
        jq.eq(0).hide("slow", function(){
            (jq=jq.slice(1)).length && hideNext(jq);
        });

})($('a'))

最后一个：

(function hideNext(jq){
                jq.eq(jq.length-1).hide("slow", function(){
                    (jq=jq.slice(0,length-1)).length && hideNext(jq);
                });

})($('a'))