javascript - jquery 一个一个加载div，不自动循环

Question

我需要在同一位置一个一个地显示一些div。与 this 非常相似的东西.

// First hide them all
$("#fades div").hide();

function fades($div, cb) {
    $div.fadeIn(100, function () {
        $div.fadeOut(100, function () {
            var $next = $div.next();
            if ($next.length > 0) {
                fades($next, cb);
            }
            else {
                // The last element has faded away, call the callback
                cb();
            }
        });
    });
}

function startFading($firstDiv) {
    fades($firstDiv, function () {
        startFading($firstDiv);
    });
}

startFading($("#fades div:first-child"));

但我毕竟需要最后一个 div 来显示(没有循环)。
如果访问者需要再次看到循环，他们需要按下或单击文本或按钮。谢谢

Answer 1

最小的改变是删除 else 案例，这是重新启动整个事情的代码。然后将 if 测试移动到淡出代码周围。

演示:http://jsfiddle.net/chw3f/95/

function fades($div, cb) {
    $div.fadeIn(100, function () {
        var $next = $div.next();
        if ($next.length > 0) {
            $div.fadeOut(100, function () {
                fades($next, cb);            
            });
        }
    });
}

(您可以通过删除现在未使用的 cb 来整理它。)

"If the visitor need to see the loop once again, they need to press or click a text or button"

只需在相关按钮的点击处理程序中调用 startFading():http://jsfiddle.net/chw3f/101/