如何在jQuery動畫中連續旋轉兒童？

Question

我有一個包含多個div'banneritem'的'bannergroup'div。我希望這些項目旋轉（淡入淡出）而不是彼此。

我可以有幾個div與班級bannergroup，每個人應該分開旋轉。

下面是HTML：

<div class="bannergroup"> 
    <div class="banneritem">Only visible one at a time</div> 
    <div class="banneritem">Only visible one at a time</div> 
    <div class="banneritem">Only visible one at a time</div> 
    <div class="banneritem">Only visible one at a time</div> 
</div> 

<div class="bannergroup"> 
    <div class="banneritem">Only visible one at a time</div> 
    <div class="banneritem">Only visible one at a time</div> 
    <div class="banneritem">Only visible one at a time</div> 
    <div class="banneritem">Only visible one at a time</div> 
</div> 

我的jQuery的樣子：

$('.banneritem').css('display', 'none'); 
$('.bannergroup').children('.banneritem').each(function(i) { 
    $(this).fadeIn().delay(4000).fadeOut();    
}); 

的問題：每個語句延續了以往的div完成之前運行。我希望它等到前一個孩子走了。另外，我需要這個來持續運行。一次後停止。我可以把它放到一個函數中，但我不知道如何知道再次調用它。

編輯：並不總是4個子項目。另外一個小組可能有不同數量的孩子，但他們都應該同步旋轉。如果一個在另一個之前完成並且然後重新啓動，那就沒有問題。

Answer 1

我已經回答了這個問題multipletimes之前。這次我會嘗試將它包裝在一個jQuery插件中。 .rotate()函數會將您想要的效果應用於匹配元素的子元素，即連續動畫中每個子元素的淡入/淡出效果。

$.fn.rotate = function(){ 
    return this.each(function() { 

    /* Cache element's children */ 
    var $children = $(this).children(); 

    /* Current element to display */ 
    var position = -1; 

    /* IIFE */ 
    !function loop() { 

     /* Get next element's position. 
     * Restarting from first children after the last one. 
     */ 
     position = (position + 1) % $children.length; 

     /* Fade element */ 
     $children.eq(position).fadeIn(1000).delay(1000).fadeOut(1000, loop); 
    }(); 
    }); 
}; 

用法：

$(function(){ 
    $(".banneritem").hide(); 
    $(".bannergroup").rotate(); 
}); 

See it here.

Answer 2

您可以用兩種方法解決這個問題。下面的是最簡單的，使用索引來增加每個項目的延遲。

$('.banneritem').css('display', 'none'); 
$('.bannergroup').children('.banneritem').each(function(i) { 
    $(this).delay(4000 * i)).fadeIn().delay(4000 * (i+1)).fadeOut();    
}); 

Answer 3

jsFiddle example

$('div.bannergroup').each(function() { 
    $('div.banneritem', this).not(':first').hide(); 
    var thisDiv = this; 
    setInterval(function() { 
     var idx = $('div.banneritem', thisDiv).index($('div.banneritem', thisDiv).filter(':visible')); 
     $('div.banneritem:eq(' + idx + ')', thisDiv).fadeOut(function() { 
      idx++; 
      if (idx == ($('div.banneritem', thisDiv).length)) idx = 0; 
      $('div.banneritem', thisDiv).eq(idx).fadeIn(); 
     }); 
    }, 2000); 
});