jQuery Animation，鏈接，.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 中執行此操作嗎？ 我希望有一個類似的 function，我可以鏈接 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) 調用相同的 function

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