Question

我的代码中有2个部分。我需要逐个显示这些部分，持续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;
}

Answer 1

使用 Jquery ，您可以等待2秒，然后按类名隐藏元素：

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

Answer 2

        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>

需要显示div 2秒

2 个答案: