Question

我有一个div，我希望在页面加载时隐藏它，并希望在几秒钟后显示它。我是如何使用jquery执行此操作。

HTML CODE

<div id="bio1">
<div class="carousel_titles">
    <h6>Saul Yarmak</h6>
        <div class="ops">Chairman & CEO</div>
     </div>
     <div class="img_block wrapped_imgs">
        <img src="img/pictures/team1.jpg" alt="Tom" />
     </div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  </p>
</div>

Answer 1

您应该默认使用css隐藏它：

#bio1 {
    display:none;
}

然后您可以使用delay()在几秒钟后显示它：

$('#bio1').delay(3000).fadeIn();

<强> Fiddle Demo

Answer 2

隐藏起来：

#bio1{
    display:none;
}

当页面准备好后，创建一个超时功能，然后在3000 MS（3秒）后显示div。

$(document).ready(function(){
    setTimeout(function(){
        $('#bio1').show(1000);
    }, 3000);
});

Answer 3

试试这段代码：

<强> DEMO

   $(document).ready(function() {  
    var hashes ="#a1_bio"; 
      $(hashes).hide();
        setTimeout(function()
                   {
                        $(hashes).fadeIn();
                   },2000)
    });

Answer 4

请尝试这个小提琴演示： -

CSS

#bio1 {
    display: none;
}

的jQuery

 $(document).ready(function(){
    setTimeout( "jQuery('#bio1').show();",3000 ); // Display div after 3 second
});

DEMO

页面加载时隐藏div并在几秒钟后显示相同的div

4 个答案: