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

“如果访问者需要再次看到循环，他们需要按或单击文本或按钮”

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

Answer 2

    // 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 3

使用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

Answer 4

HTML CODE：

    <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/

jquery逐个加载div，没有自动循环

4 个答案: