Question

标记：

<div class='parent'>
  <div class='item'>1</div>
  <div class='item hidden'>2</div>
  <div class='item hidden'>3</div>
  <div class='item hidden'>4</div>
</div>

代码：

$('.parent .item').each(function () {
    var current = $(this);
    setInterval(function () {
        $(current).fadeOut(function () {
            $(this).next().fadeIn();
        });
    }, 2000); //rotate every 2 seconds
});

我希望每个“项目”显示2秒，然后显示fadeOut和淡入下一个项目。当没有更多的项目然后fadeOut并从头开始。代码似乎可以工作，但它有时间问题，并且不会自动移动所有项目。

隐藏的类是display:none。

Answer 1

我用小提琴来CSS它，所以数字重叠而不是抖动。此外，默认情况下隐藏所有项目。

http://jsfiddle.net/9fXmA/1/

var items = $('.parent .item');
var item = items.first();

function cycle() {

  // Take 500 MS to fadeout first    
  item.fadeOut( 500 );

  // Get next item
  item = item.next();

  // When at last item, go to first
  if ( !item || !item.length ) {
    item = items.first();
  }

  // Fadein new item for 500 MS
  item.fadeIn( 500, function() {
     // Wait 1500 MS ( to total 2 seconds ) before bringing in next item
     setTimeout( cycle, 1500 );
  });

}

// Show first item instantly
item.show();

// Wait to seconds before starting to cycle
setTimeout( cycle, 2000 );

Answer 2

尝试：

$('.parent .item').each(function(){
  var itm = $(this);
  itm.fadeOut(2000, function(){
    itm.next().fadeIn();
  });
});

Answer 3

这有效，但它跳了很多：

$('.parent').find('.item').each(function () {
    var current = $(this);
    setInterval(function () {
        current.fadeOut(function () {
            current.next().fadeIn();
        });
    }, 2000); //rotate every 2 seconds
});

由于基于setInterval的过程不相交，您可能希望它具有顺序过程，并且可能不会显示多个这样的过程。

jquery next（）和setInterval（）

3 个答案: