Question

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>
            Hiding
        </title>
        <link rel="stylesheet" href="css/style.css">
        <script> src="scripts/hide.js"></script>
    </head>

    <body>
            <div id ="hideme">
                <h1 class="type">strongbad_email.exe</h1>
            </div>
    </body>
</html>

CSS

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

h1.type {   
    font: bold 100% Consolas;
    border-right: .1em solid;
    width: 19ch;
    margin-top: 3em;
    margin-left:5em;
    overflow: hidden;
    animation: typing 3s steps(30, end), 
               blink-caret .5s;
}

JS

function hid() {
  document.getElementById("#hideme").style.display = "none";
}
setTimeout("hid()", 5000)

在输入动画后，文本将保留在屏幕上。任何帮助将不胜感激。

Answer 1

问题在于您的JavaScript。试试这个：

function hid() {
  document.getElementById("hideme").style.display = "none";
}
setTimeout(hid, 5000)

使用getElementById时，您无需指定CSS ID选择器。

您还想简单地将函数名称传递给setTimeout，而不是字符串。

Answer 2

setTimeout的第一个参数应该是函数名或匿名函数：

功能名称：

 setTimeout(hid, 5000);

匿名函数：

setTimeout(function() {
    hid();
}, 5000);

使用JavaScript隐藏div

2 个答案: