javascript - 页面加载时的 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() 会淡出它回到页面上。不幸的是，这没有用。

您可以在此处查看代码:Fiddle

那么有人可以告诉我如何保留 <div> 吗？隐藏直到页面加载，然后使用 jQuery 淡入淡出？

谢谢!

Answer 1

问题是 fadeIn 作用于隐藏元素，当您在 fadeIn() 被调用之前移除隐藏类时，元素将完全显示，因此没有什么可做的淡入()

应该是

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

演示:Fiddle