在页面上加载时从文档向下滑动的文本答案

【问题标题】：Text sliding down from document while loading on page在页面上加载时从文档向下滑动的文本
【发布时间】：2017-01-12 18:46:49
【问题描述】：

我的目标是让问候消息滑到页面“外部”。我最近在这里搜索参考，只找到了如下的衣柜代码，但这不是我所期望的，因为似乎文本出现在页面中间......如果有人可以帮助我，请感谢它。

$(document).ready(function() {
    $('#greeting').hide();
    $('#greeting').slideDown(1000);
});

#greeting { padding-top: 100px; }

<h1 id="greeting">Welcome!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案1】：

试一试！

jQuery：

$(document).ready(function(){ // on document ready
    $("#greeting").addClass("active"); // add the class "active" to the greeting text
});

CSS：

#greeting{
    position: fixed; 
    top: -200px; // start at 200px above the page
    transition: top 500ms; // take 0.5s to move from -200px to 500px
} 
#greeting.active{ // when #greeting has class "active"
    top: 500px; // move to 500px from the top of the page
}

这种方法需要使用 CSS 和 jQuery，但希望它就足够了。

当然，您可以将top 属性值更改为您需要的任何值，以获得所需的效果。

希望对你有帮助:)

【讨论】：

太棒了！凯兰。稍作调整后，这似乎更好。如果对整个事情使用 jQuery，我将使用它，但似乎动画不能很好地使用它。这就是为什么我仍然有疑问。
@PattyPutty 您似乎面临什么问题？