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

问题:each 语句在前一个 div 完成之前继续运行。我想让它等到前一个 child 走了。另外，我需要这个来持续运行。一次后它停止。我可以将它放入一个函数中，但我不确定如何知道如何再次调用它。

编辑:并不总是有 4 个子项目。此外，一组的 child 数量可能与其他组不同，但他们应该同步轮换。如果一个先于另一个完成，然后自己重​​新启动，这是可以的。

Answer 1

我已经回答了这个问题multiple times前。这次我将尝试将它包装在一个 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.