Нужно показать div на 2 секунды

-3

У меня есть 2 раздела в моем коде. Мне нужно показать разделы по одному за 2 секунды. Пожалуйста, помогите мне в этом.Нужно показать 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-код, а также я добавил свой стиль ниже

.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 =" question1 "') недопустимо. Что вы пробовали? – Xufox

Вы имеете в виду чередовать, как показано в одном из них, а затем каждый второй, чередующийся, или вы имеете в виду показать один, а затем второй на секунду при загрузке страницы? –

Использование Jquery вы можете ждать 2s, а затем скрыть элементы по имени класса:

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

редактировать

Вышеуказанное скроет оба элемента одновременно. Если вы хотите показать их отдельно, я бы сначала обновил html, чтобы добавить отдельные идентификаторы к каждому элементу.

<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

Первоначально мне нужно показать один раздел. и скрыть первый раздел и показать следующий раздел – user7393779

Хорошо, я обновил код. Во-первых, сценарий скрывает второй ответ. Ожидает 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 секунды

ответ

Смежные вопросы