如何在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); 
});