jQuery load Div逐一，无需自动循环

Question

我需要在同一位置逐一显示一些div。与此非常相似的东西。

// 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来整理它。）

"如果访问者需要再次查看循环，则需要按或单击文本或按钮"

只需从单击处理程序中调用startFading()，请在所讨论的按钮上：http：//jsfiddle.net/chw3f/101/

Answer 2

html代码：

    <div id="fades">
    <div>Hello #1</div>
    <div>Hello #2</div>
    <div>Hello #3</div>
    <div>Hello #4</div>
    <div>Hello #5</div>
    <div>Hello #6</div>
    <div>Hello #7</div>
    <div>Hello #8</div>
    <div>Hello #9</div>
    <div>Hello #10</div>
</div>
<input id="looponclick" value='Click Me!' type="button"></input>

JavaScript代码：

function fades($div) {
// First hide them all
$("#fades div").hide();
$("#looponclick").hide();
$div.fadeIn(100, function () {
    var $next = $div.next();
    // Fade out the current element only
    // if you have next element
    if ($next.length > 0) {
        $div.fadeOut(100, function () {
            fades($next);
        });
    }
    else {
        $("#looponclick").show();
    }
});
}
fades($("#fades div:first-child"));
$('#looponclick').click(function(){
    fades($("#fades div:first-child"));
});

演示：

http://jsfiddle.net/chw3f/105/

Answer 3

    // First hide them all
$("#fades div").hide();
function fades($div, cb) {
    $div.fadeIn(100, function () {
        if (currentDivCount < totalDivCount-1) {
            $div.fadeOut(100, function () {            
                currentDivCount++;
                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);
    });
}
var totalDivCount = $("#fades div").length;
var currentDivCount = 0;
startFading($("#fades div:first-child"));

http://jsfiddle.net/chw3f/100/

Answer 4

使用 if(!$next.length) return false;从最后一个停止函数。并调用单击时想要的功能。

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

demo