ページの読み込み中にdivを非表示にしますか？

私は面白いものをロードするdivを1つ持っています。クライアントはそれについて少し気になりますが、私はそれらを助けたいと思います。ページの読み込み中にdivを非表示にしますか？

jQueryで設定した時間にdivを非表示にする方法はありますか？おそらく単なる不透明度：ページの読み込み時に0、次に2秒で不透明度に変更します：1

代わりに、クラスメソッドを追加/削除することができます。私はコードが（ページはもちろん、リフレッシュされていない限り）ので、何か私は

jQuery('#DIV').WHILELOADING(function() { 
    jQuery('#DIV').addClass('hidden_div') 
}); 

jQuery('#DIV').AFTER_2_SECONDS(function() { 
    jQuery('#DIV').removeClass('hidden_div') 
});

のように無期限ページのロード中に、その後、他の状態にある状態でそれを持っているだろうかわからないんだけどこれを行う方法を「完全に」確認してはいけません。同様に、私が行う方法を知っている "ローディングスクリーン"は、質問から外れています。：ロード、私は」ながら、ちらつきを避けるために、代わり http://jsfiddle.net/NNQ4f/

出典

2012-03-16 Xhynk

ルックjqueryの遅延を使用して上を（） – DG3

どのようにこのdiv要素をロードしていますか？それはページの読み込みですか？答えはDIVをどのようにロードするかによって異なります。 .loadを使用している場合、最初にdivを非表示にしてから、.loadコールバックを使用してdivを表示することができます。 –

jQueryではなくPHPで生成されたHTMLによってロードされます。私は最初のコメントに従っているので、これは何か？ "jQuery（ '＃DIV'）。delay（1000）.removeClass（ 'hidden_div'）;" ？ – Xhynk

div要素がロードされているされてどのように、単にトンを持っています彼はその後のdivを表示する.LOADコールバックを使用し、ページの読み込みに隠された、あなたは.load（AJAX呼び出し）を使用してdiv要素をロードする場合

jQuery(window).load (function() { 
     jQuery('#DIV').removeClass('hidden_div') 
    });

の内側のdivを示しDIV。上記の二つの

jQuery('#DIV').load('<URL>', function() { 
    jQuery('#DIV').removeClass('hidden_div') 
});

あなたはdivは、以下のように隠されていることを想定して、

<div id="DIV" class="hidden_div"><!-- div content --> </div>

注：追加遅延はあなたに一貫性のある結果が得られない場合があります。例：遅延が5秒で、ページが読み込まれるまでに10秒かかる場合は、同じ問題が発生します。

PHPで生成されたHTMLであり、jQueryでは読み込まれません。私はの最初のコメントに従っています。"jQuery（ '＃DIV'）。delay（1000）.removeClass（ 'hidden_div'）;"

PHPで生成されたコードの場合は、生成コードの末尾にremoveClassコードをエコーします。

出典

2012-03-16 21:38:28

これの最初の部分はまさに私が必要としたものです、ありがとう！ :) – Xhynk

このコードはdelay()

$('#myDiv').slideUp(300).delay(800).fadeIn(400);

jsfiddle上のjqueryのAPIのウェブサイトからですdはCSSで最初の隠しをすることをお勧めします

ドキュメントが読み込まれたときに「none」にするdivインラインの表示プロパティを設定していないのはなぜ

#div { display: none; }

その後JS

のdivの使用を表示する

function showDiv() { 
    $('#div').show(); 
} 

setTimeout(showDiv, 2000);

出典

2012-03-16 21:35:57 DG3

$(document).ready(function(){ 

    $('#div') 
    .css({opacity:0}) /*set opacity to 0*/ 
    .delay(2E0) /*wait 2 seconds*/ 
    .animate({opacity:1}); /*animate in opacity*/ 

});

、

$(document).ready(function(){ 

    $('#div') 
    .css({opacity:0}) /*set opacity to 0*/ 

    //wait for body to load 
    $('body').bind('load', function(){ 
    $('#div').animate({opacity:1}); /*animate in opacity*/ 
    }); 

});

出典

2012-03-16 21:36:06

：P

出典

2012-03-16 21:36:14 mikevoermans

ユーザーがjsを有効にしていない場合は、内容を見ることは決してありません... – Jared

それは、とにかくjQueryのスライダーなので、私はあまり心配していません。同様に、彼らのターゲット市場、人々の99％が – Xhynk

のdivを表示？

<div id="mydiv" style="display:none;"> </div> 



$(document).ready(function() { 
$('#mydiv').show(); 
});

出典

2012-03-16 21:37:48

にJSを持っているので、彼らは何もないjsがある場合はどうなりますか？決してそれを見ない... – Jared

最初あなたはjqueryのを経由してそれを隠す（またはCSSしかしthatsのほとんどの人がやって好きではない何かを）し、ページが完了したらあなたはそれを包む試すことができのロードショーメソッドを呼び出すことができます。

$(document).ready(function(){ 
     $("#DIV").hide(); 
    }

、その後、（実際に、それは問題ではありませんが）あなたのページの下の方に：それは、ページの読み込みであれば

$(window).load(function(){ 
    $("#DIV").show(); or .fadeIn(); 
    });

出典

2012-03-16 21:37:55

最初にdivを非表示にしてから、クラスを削除するようにタイマーを設定するか、.fadeToを使用してゆっくりと表示することができます（他のものにスワップするだけでなく、不透明度の設定も必要です）。しかし私の個人的な意見では、ページが最初に正しく見えるように、または偶然が起こった後でビューを変更するための他の非時計指向のタイミングスキームを見つけるために、ページを再加工することができるかもしれないと思う。以下のような

何か：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    setTimeout($('#DIV').removeClass('hide'), 3000); 
    }); 
</script> 
<style type="text/css"> 
    div#DIV .hide { 
     display: none !important; 
    } 
</style> 

[...] 

<div id="DIV" class="hide"></div>

構文ない検証。

乾杯、〜M

出典

2012-03-16 21:43:16 MattInSD73

ユーザーがjsを有効にしていない場合、CSSを介して非表示にすると、ユーザーは決してコンテンツを表示しません。 – Jared

Ahh良い点。はい。hideのクラス属性ではなく、.addclassを使用して非表示にします。 – MattInSD73

まず、非JSのユーザーのためのコンテンツを設定します。

<body class="no-js"> 
    <div id="div">Content</div> 
</body>

その後、クラスやショーのコンテナを削除します。

$(document).ready(function() { 
    // Remove no js class 
    $('body').removeClass('no-js'); 
    // Show and animate div container 
    $('#div').hide().delay(2000).fadeIn(); 
});

出典

2012-03-16 21:43:32 algi

jsにjsがない場合、「no-js」クラスを削除する方法はありますか？ DOMがロードされるとすぐにクラスを追加してください。 – Jared

利用可能なjsがない場合、 "no-js"クラスは本体に残り、最初は非jsユーザー専用の要素をスタイルすることができます。他の方法では、jを無効にしたユーザーの中には#divコンテナは見えません。編集：CSSのスタイリングは必要なかったので、私はこの例のためにそれを削除しました。 – algi

あなたが削除したCSSは 'display：none'と書かれていたので、私は自分のコメントを投稿しました。 – Jared

jsFiddle Example

私はそれを削除することができているCSSクラス、その後$(window).load();を追加するために$(document).ready();を使用すると思います。

$(document).ready(function(){ 
    $('#DIV').addClass('hidden_div'); 
}); 
$(window).load(function(){ 
    $('#DIV').removeClass('hidden_div'); 
});

出典

2012-03-16 21:46:37 Jared

ここにすべての方法は、私はそれらをテストし、動作していません。 Jqueryは、コードがDOM準備関数内になければならないため、ユーザーが見る前に何かを隠すには遅すぎます。最も簡単で簡単な方法：divに隠す必要がある要素を入れ、このdivの上部にjsを追加して、loding中に非表示にすると、jsが有効になっていないユーザーにとっても安全です。 divの非表示にする

例：（すなわち、クロム、FFでは、最新バージョン05.2013をテストした）

<div id="content"> 
    <script type="text/javascript"> 
      // Get the div and hide it 
      var div = document.getElementById('content'); 
      div.style.display = 'none'; 
      //Shows the div as soon as the page is loaded 
      window.onload = function() { 
      div.style.display = 'block';} 
    </script> 
    // Content that needs to be hidden 
</div>

乾杯

出典

2013-05-09 21:50:12 user1526836

ページの読み込み中にdivを非表示にしますか？

答えて

関連する問題