0

このスクリプトは、以前の投稿 (ここ)から入手しました。

これを少し編集したので、次のようになりました。

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

div を表示および非表示にする jQuery は、HTML にいくつかを入れるだけで機能します。しかし、関数にそれらを追加するときではありません。

フィドル

4

1 に答える 1

1

div をロードした後 ( を呼び出してloadContent) div を非表示にし、非表示になったら呼び出す必要があります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/

于 2012-11-29T12:29:00.857 に答える