jquery - jQuery を使用してデータベースからコンテンツを読み込み、フェードインする

Question

MySQL データベースからコンテンツを取得し、.xml に出力します#content div。

その div をデフォルトで非表示にして、コンテンツがロードされた後にスムーズに表示されるようにしたい。

とても簡単なことはわかっていますが、私の人生では、その方法を思い出せません。

Answer 1

JQueryでは、追加できます

$(document).ready(function()  {
    $('div#id_of_div').html("<?php $content; ?>");
});

しかし、コンテンツを表示する方法はたくさんありますfadeIn("slow")。効果を与えること。

関数内で ajax を使用することもできreadyます。それはすべて、あなたとデータを取得する方法に依存します。

Answer 2

ajaxを介してコンテンツをロードします... (url-to-your-result-stuff)....データを受け取った後にフェードインできるよりも

jQuery(function(){
    jQuery('your-div-selector')
        .hide()
        .load(
            'url-to-your-result-stuff',
            {},
            function() {
                jQuery(this).fadeIn();
            });
    }); 

Answer 3

スムーズな移行が必要な場合は、プロパティの代わりにvisiblityとプロパティを使用してクラス「hidden」を使用します。そうしないと、要素が非表示のときにドキュメントの通常のフローの一部にならず、ちらつきが発生する可能性があります。プロパティは、について知らない古いブラウザをサポートすることです。最初に HTML にクラスを追加してから、CSS を追加します。opacitydisplayvisibilityopacity

div.hidden {
  visibility: hidden;
  opacity: 0;
}

次に、コンテンツをロードするときにコールバックを使用して、div を再度表示できます。

$('#content').load('contents.php', function() {
  $(this).css('visibility', 'visible').fadeTo('fast', 1);
});