如何在jQuery中淡入/淡出计数器？

Question

所以我有一堆div，每个div都包含一个数字。我正在尝试设置一个计数器，它的计数如下：

1 2 3
2 3 4
3 4 5
4 5 1
1 2 3

等等。您可以看到我当前的代码 - here on jsFiddle。

我试图让节点一次fadeIn和fadeOut一个节点，而不是显示/隐藏整个容器。

Answer 1

这是一种方法：

//I didn't wrap the roller inside a function for this example, but you can pass
//these values as arguments to a function instead of assigning them here:
var $slides = $('#slides'),
    n = 3; //number of visible children (`.speaker`)

//init by hiding the children with index larger than `n`
$slides.children(':gt('+(n-1)+')').hide();

//note that :eq and :gt are 0-based, hence the n-1. You could also assign
//n -= 1 or n-- after receiving the n parameter if using a function wrapper
setInterval(function () {
    $slides.children(':first').fadeOut(600, function () {
        $slides.append(this).children(':eq('+(n-1)+')').fadeIn(600);
    });
}, 1500);

Fiddle