是否有隐藏在网页上的菜单/标题，并有文本自动出现x秒量后

Is there anyway to hide a menu/title on a web page and have the text appear automatically after x amount of seconds?

本文关键字：文本 网页 隐藏 标题 菜单 是否      更新时间：2023-09-26

我对我的学校项目有一个想法，我一直在网上搜索如何在css或java中添加这个功能。我只是想标题和整个菜单被隐藏约5或6秒出现在网页之前。我正在考虑使用一个div来隐藏这些，但我不是100%肯定，如果这将与一个菜单，因为它的所有内容和链接工作。任何建议或帮助是感激的!

下面是一个纯CSS示例:

演示
<div class="content">
    <div class="show-after-five">
         <h1>Hey! I am here 5 seconds late</h1>
    </div>
</div>

.show-after-five {
    opacity: 0;
    animation-name: fade-in;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fade-in;
    -webkit-animation-iteration-count: infinte;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay: 5s;
    -webkit-animation-fill-mode: forwards;
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
如果你有任何问题请告诉我。

创建一个带有display:none style属性的div，并把所有你想要隐藏的菜单内容放在那里:

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

然后在页面底部使用jQuery:

<script>
    setTimeout(function(){
        $('#mydiv').fadeIn();
    }, 5000);
</script>

这将在5000毫秒或5秒内执行show方法，并将有一个很好的淡出效果。这都是基于你所描述的你想要的

使用Javascript(特别是jQuery)很容易做到。

把你的菜单放到DOM上:

<div class="menu">Pretend this is a menu</div>

设置页面加载时显示为none:

.menu {
    display: none;
}

然后设置一个计时器，当文档准备好时，它会在5秒后出现:

$(document).ready(function() {
    setTimeout(function (event) {
        $('.menu').show();
    }, 5000);
});

演示:http://jsfiddle.net/3Grdd/

是的，有可能。有很多方法可以做到这一点。最简单的方法是将jQuery与CSS3混合使用。

CSS:

#target_ID{ display: none; }

jQuery:

$(function() { $("#target_id").delay(6000).show(); });

您可以使用jQuery的delay()函数来完成此操作。

http://api.jquery.com/delay/

jQuery(document).ready(function ($) {
    $('#menu').delay(500).removeClass('.hidden');
});

你可以使用fadeIn()或其他jQuery过渡函数来代替removeClass()。

其他一些答案建议使用display:none。我会很谨慎，因为这会从布局中删除内容，并可能把事情搞砸，这取决于你如何对网站进行编码。如果你已经加载了Jquery，这里有一个方法。

CSS 

.menu {opacity:0;}
.title {opacity:0;}

Javscript 

setTimeout( function(){
$('.menu , .title').animate({ opacity:1 },3000);
}, 3000);

"。菜单"answers"。标题是你的容器。第一个"3000"是淡入的动画时间。第二个"3000"是延迟。3000 = 3秒。5000 = 5秒，等…

相关文章：