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

Question

我有一个带有'bannergroup'类的div,它包含多个div'banneritem'.我希望这些项目能够旋转(淡入然后淡出)代替彼此.

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

这是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

我已经回答了这个问题多 的时间了.这次我将尝试将其包装在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();
});  

在这里看到它.