javascript - 切换而不是仅仅出现？

Question

我正在使用下面的代码在顶部显示一条通知，但它只是突然出现。我希望它向下滚动类似于切换，同时将其下方 div 中的所有内容向下推。

继承人的Javascript

<script>

window.onload = function() {
    setTimeout(function() {
        document.getElementById('top').style.display = 'block';
    }, 10000);
}

</script>

html:

<div id="top">
    <p>content here</p>
</div>

Answer 1

使用.slideDown()而不是将 display 属性更改为 block

window.onload = function () {
    setTimeout(function () {
        $('#top').slideDown()
    }, 10000);
}

Answer 2

你有这个问题用 jQuery 标记，并且有一个直接的 jQuery 函数，所以这里是那个版本：

$(function(){
  setTimeout(function(){
    $('#top').slideDown();
  }, 10000);
});

http://api.jquery.com/slideDown/

如果你想在纯 javascript 中执行此操作，我建议使用 CSS3 过渡，而不是修改属性，例如display或尝试手动执行动画。

此方法使用 CSS3 和 max-height 的示例，可在此处找到：http: //davidwalsh.name/css-slide

然后，您将使用 javascript 添加和删除类以切换所需的状态，CSS3 转换将为您执行动画。