页面加载时jQuery .fadeIn()？

Question

我正在尝试设置一些代码,以便我首先隐藏它,但在页面加载后淡入.

我有以下HTML代码:

<div class="hidden">
<p>This is some text.</p>
</div>

然后我也有这个CSS代码,它隐藏了<div>.

div.hidden
{
    display: none
}

最后,我有我的jQuery:

$(document).ready(function() {
    $('div').fadeOut(1);
    $('div').removeClass('hidden');
    $('div').fadeIn(1000);
});

我希望会发生的是第一个.fadeOut()会淡出,removeClass会阻止CSS隐藏它,最终的.fadeIn()会将它淡化回页面.不幸的是,这不起作用.

你可以在这里查看代码:小提琴

那么有人可以告诉我如何在<div>页面加载之前保持隐藏,然后使用jQuery淡化它？

谢谢!

Answer 1

问题是fadeIn隐藏元素的作用,当你在fadeIn()被调用之前删除隐藏的类时,元素被完全显示,因此没有任何内容fadeIn()

它应该是

$(document).ready(function () {
    $('div.hidden').fadeIn(1000).removeClass('hidden');
});

演示:小提琴

Answer 2

HTML代码：

<div class="toshow" style="display:none;">
    This is some text.
</div>

jQuery代码：

$(document).ready(function () {
    $('div.toshow').fadeIn(2200);
    // OR $('div.toshow').show(2200);
    // OR $('div.toshow').slideDown("slow");
});

更改 jquery show()/hide() 动画？