如何在页面加载后使用jQuery实现下拉动画？

Question

当我尝试滑下更多信息的div时，我遇到了时间问题。 我期望的功能是，一旦页面已经呈现，div就会从顶部向下滑动。 我的问题是，如果我使用$(document).ready()..，动画不会明显出现。

这是我的代码：

    $(document).ready(function() {
        $(".MoreInfo").slideDown('slow');
    });

如果我将它绑定到其他元素的点击事件上，它可以很好地工作。但是我不确定如何在页面加载后使其可见地向下滑动。

谢谢！

- bulltorious

Answer 1

我尝试混搭使用：

$(window).load(function()  

并且

$(document).ready(function()  

但是没有成功。我最后用了

 $(document).ready(function() {
    $(".MoreInfo").slideUp(1).delay(2000).slideDown('slow');

似乎有效。我认为这与元素已经显示有关，而不是其他任何因素。

- bulltorious

Answer 2

你可能想尝试使用

$(window).load(function() 

而不是

$(document).ready(function() 

由于$(document).ready触发时，您要操作的一些元素可能没有完全加载。

- Harv

Answer 3

或许尝试使用 body onload 代替

$("body").load(function() {
    $(".MoreInfo").slideDown('slow');
});

...document.ready 会在 DOM 可以被操作时立即发生，而不一定是页面显示后 - 它可能在页面显示之前很久就已经发生了。您也可以尝试将其放在 setTimeout 调用中，以允许一些额外的时间。

- Graza