页面加载时的jQuery .fadeIn（）？答案

【问题标题】：jQuery .fadeIn() on page load?页面加载时的jQuery .fadeIn（）？
【发布时间】：2014-02-17 02:10:55
【问题描述】：

我正在尝试设置一些代码，以便我有一个起初隐藏但在页面加载后淡入的代码。

我有以下 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 将其淡入吗？

谢谢！

【问题讨论】：

标签： javascript jquery html css fadein

【解决方案1】：

http://jsfiddle.net/DerekL/Bm62Y/5/

//If you do not want the "hidden" class to be still around
$(function() {
    $('div').fadeIn(1000).removeClass('hidden');
});

//If you don't mind it, then you can just do fadeIn
$(function() {
    $('div').fadeIn(1000);
});

【讨论】：

【解决方案2】：

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

应该是

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

演示：Fiddle

【讨论】：

您只需要$(document).ready(function () { $('div.hidden').fadeIn(1000); });

【解决方案3】：

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");
});

Change the jquery show()/hide() animation?

【讨论】：

【解决方案4】：

//image fade in
    //set image display none
        $("img").css("display", "none");
    //call the image with fadeIn effect
    $("img").fadeIn(5000 , function(){
        $(this).css("display","normal");
    });

我已经尝试过图片。你也可以尝试文字..

【讨论】：