divを2秒間表示する必要があります

-3

私のコードに2つのセクションがあります。私は2秒間1つずつセクションを表示する必要があります。私にこれを手伝ってください。divを2秒間表示する必要があります

<section class="square_box tctgrid" id="question1"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div class="empty"></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</section> 
<section class="square_box tctgrid" id="question1"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div class="empty"></div> 
</section>

上記のコードは私のhtmlコードであり、また、私はあなたが2秒待つと、そのクラス名で要素を非表示にすることができますjQueryのを使用して

.tctgrid div{ background: #ba1818; float: left; height: 120px; margin: 1%; width: 31%; } .tctgrid div.empty{ background-color:#fff; } .psychomotor{ width: 34%; margin-bottom:50px; }

出典

2017-02-15 user7393779

は同じ値を持つ複数の 'id'を持っていけません。そのために使用するクラス –

ID（ 'id =" question1 "'）の再利用は無効です。何を試しましたか？ – Xufox

あなたは交代することを意味しますか？ショー1と同じように、交互に交互に、あるいはショーワンを意味しますか？ –

の下に自分のスタイルを追加しました：

setTimeout(function(){ 
    $('.square_box').hide(); 
}, 2000);

編集

上記は両方の要素を同時に非表示にします。それらを別々に表示したい場合、最初にhtmlを更新して個々のIDを各要素に追加します。

<section class="square_box tctgrid" id="question1"> 
</section> 
<section class="square_box tctgrid" id="question2"> 
</section>

次にJqueryを使用します。まず

$('#question2').hide(); // Hide the second question 

setTimeout(function(){ 
    $('#question1').hide(); // Hide the first question 
    $('#question2').show(); // Show the second question 

    setTimeout(function(){ 
     $('#question2').hide(); // After 2s, hide the 2nd question 
    }, 2000); 
}, 2000);

出典

2017-02-15 09:35:28 Treeindev

最初は1つのセクションを表示する必要があります。最初のセクションを非表示にして次のセクションを表示します – user7393779

OK、コードを更新しました。まず、スクリプトは2番目の答えを隠します。 2秒間待ってから最初の質問を非表示にし、2番目の質問を表示します。その後、もう2秒待ってください。最後に、2番目の質問を隠します。 – Treeindev

 use this code: 

      <body> 
       <div align="center"> 
       <img id="image" src="image1.png" height="200" width="200"> 
      </div> 
      <div align="center"> 
       <img id="image1" src="image1.png" height="200" width="200" style="visibility:hidden;"> 
      </div> 
      </body> 
     <script> 
     var hidden = false; 

     setInterval(function() { 
      document.getElementById("image").style.visibility = hidden ? "visible" : "hidden"; 
      document.getElementById("image1").style.visibility = hidden ? "hidden" : "visible"; 
      hidden = !hidden; 
     }, 2000); 

     </script>

出典

2017-02-15 09:48:42 KiranPurbey

フィドルリンクを参照してください：http://jsfiddle.net/p15fueuq/ – KiranPurbey

divを2秒間表示する必要があります

答えて

関連する問題