4

我有一个类 '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 个子项。此外，一组可能具有与其他组不同数量的孩子，但它们都应该同步旋转。如果一个在另一个之前完成然后重新启动就可以了。

4

3 回答 3

7

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

看这里。

于 2013-02-16T16:22:06.787 回答
1

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);
});
于 2013-02-16T16:57:28.193 回答
0

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

$('.banneritem').css('display', 'none');
$('.bannergroup').children('.banneritem').each(function( i ) {
  $(this).delay(4000 * i)).fadeIn().delay(4000 * (i+1)).fadeOut();               
});
于 2013-02-16T16:02:03.350 回答