javascript - jquery next() 和 setInterval()

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 和 fadeIn 下一个项目。当没有更多项目时，然后淡出并从头开始。该代码似乎可以工作，但它存在时间问题并且不会自动通过所有项目。

隐藏类是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.