Question

从早期帖子（here）获得此脚本

我编辑了一下所以现在我得到了：

<div id="outer" style="display: none"></div>

$(document).ready(function() {
$("#outer").css("display","block");
var $divs = $("#outer > div").hide(),
    current = 0;

$divs.eq(0).show();
function loadContent() {
    for(var i=0; i<20; i++) {
        $("#outer").append("<div id='divs"+i+"'>test"+i+"</div>");
    }  
}
function showNext() {
    if (current < $divs.length - 1) {
        $divs.eq(current).delay(2000).fadeOut('fast', function() {
            current++;
            $divs.eq(current).fadeIn('fast');
            showNext();
        });
    }
}
loadContent();
showNext();

}）;

如果我只是将一些内容放入HTML中，那么显示和隐藏div的jQuery就可以工作。但是，当我将它们添加到我的函数中时，不是这样。

Fiddle

Answer 1

您需要在加载div之后隐藏div（通过调用loadContent），并在隐藏后调用showNext：

$(document).ready(function() {
    $("#outer").css("display","block");
    var current = 0;

    function loadContent() {
        for(var i=0; i<20; i++) {
            $("#outer").append("<div id='divs"+i+"'>test"+i+"</div>");
        }  
    }

    function showNext() {
        if (current < $divs.length - 1) {
            $divs.eq(current).delay(2000).fadeOut('fast', function() {
                current++;
                $divs.eq(current).fadeIn('fast');
                showNext();
            });
        }
    }
    loadContent();
    var $divs = $("#outer > div");
    $divs.hide();
    showNext();
});

以下是演示：http://jsfiddle.net/rZ2yF/1/

无法隐藏或显示附加的div

1 个答案: