javascript - jQuery 在页面加载时缓慢显示

Question

我正在尝试在页面加载时对 ID 为“contentblock”的特定 div 进行缓慢显示。这是我第一次尝试用 jQuery 编写代码，但一直失败。以下是我最近的尝试，但我对此完全是个新手，令人惊讶的是谷歌并没有提供很多帮助。

<script type='text/javascript'>

$(window).onload(function(){
   $('#contentblock').slideDown('slow');
    return false;
 });


</script>

在此之前，我还有以下内容而不是上面的窗口加载行:

$(document).ready(function(){

但这也没有取得任何成功。有人可以帮助 jQuery 新手吗？

Answer 1

首先，您需要确保该元素是隐藏的(否则它不会显示，因为它已经可见)。您可以在 CSS 或 JavaScript/jQuery 中执行此操作:

#contentblock {
    display: none;
}

或者:

$('#contentblock').hide();

如果您使用 CSS 隐藏该元素，您需要注意，如果用户浏览器中禁用了 JavaScript，该元素将保持隐藏状态。如果您使用 JavaScript，则存在元素在首次显示然后隐藏时可能会闪烁的问题。

然后调用:

$(window).load(function(){
   $('#contentblock').slideDown('slow');
 });

我对你的 jQuery 做了两次修改，首先我将 onload 更改为 load 并且我还删除了 return false，因为 load() 方法不期望返回任何值，所以它在这里没有任何用处。

对于上面的 jQuery，您可以改用:

$(document).ready(function(){
   $('#contentblock').slideDown('slow');
 });