div中的徽标和div的高度在10秒后消失了吗？

Question

是否可以在其中隐藏div和徽标？

我在屏幕顶部有一个jpeg徽标，但是大约10秒钟后我希望它消失，并且其下方的文本向上移动以替换它。

我已经找到了隐藏徽标的方法，但是我无法使该框变为0px并消失，以便使底部面板或向上移动以替换徽标区域。

无论如何请这样做

Answer 1

使用带有setTimeout的jQuery的hide方法：

setTimeout(function() {
    $("#topDiv").hide();
}, 10000);

或者，您可以从页面上完全删除元素：

setTimeout(function() {
    $("#topDiv").remove();
}, 10000);

Answer 2

仅使用animation的CSS

注意！如果您删除99%{ opacity:1;}，则div会逐渐消失

.logo{
background:blue;
height:0px;
width:50px;
opacity:0;
animation: hide 10s;
}
@keyframes hide {
    0% { opacity:1;height:50px; }
    99%{ opacity:1;height:50px;}
    100%{ opacity:0;height:0px;}
}
.content{
background:red;
height:50px;
width:50px;
}

<div class="logo">
</div>
<div class="content">
</div>