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'))

jQuery Animation，Chaining，.each（）和.animate（）（或fadeIn（）和fadeOut（））

4 个答案: