如何在jQuery动画中连续旋转孩子？

我有一个带有’bannergroup’类的div，它包含多个div’banneritem’。 我希望这些项目可以旋转（淡入然后淡出）代替彼此。

我可以使用类bannergroup有几个div，每个div应该单独旋转。

这是HTML：

 
Only visible one at a time
 
Only visible one at a time
 
Only visible one at a time
 
Only visible one at a time
 
 
 
Only visible one at a time
 
Only visible one at a time
 
Only visible one at a time
 
Only visible one at a time
  

我的Jquery看起来像：

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

问题：每个语句在前一个div完成之前继续运行。 我希望它等到前一个孩子不见了。 此外，我需要这个继续运行。 一次后它停止。 我可以把它放到一个函数中，但我不知道怎么知道再次调用它。

编辑 ：并不总是4个子项目。 另外一组可能具有与其他组不同的子组数，但它们应该同步旋转。 如果一个在另一个之前完成然后重新启动它就没问题。

Answer 1

我以前多次回答过这个问题。 这次我将尝试将其包装在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(); }); 

在这里看到它。

Answer 2

jsFiddle示例

 $('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); }); 

Answer 3

您可以通过两种方式解决此问题。 下面的一个是最简单的，使用索引来增加每个项目的延迟。

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