Question

我的目标是将问候消息向下滑动到页面的“外部”。我最近在这里搜索了参考，并且只发现了如下的cloeset代码，但它不是我所期望的，因为看起来文本出现在页面的中间...如果有人可以帮助我，请欣赏它。

$(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>

Answer 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属性值更改为您需要的任何值，以获得所需的效果。

希望有所帮助:)

在页面

1 个答案: