jquery - 无法隐藏或显示附加的 div

Question

从较早的帖子（此处）中获得此脚本

我对此进行了一些编辑，所以现在我得到了：

<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();

});​</p>

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

小提琴

Answer 1

您需要在加载 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/