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()被称为元素之前得到充分的展示因此没有向fadeIn()

它应该是

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

演示：Fiddle

Answer 2

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

Answer 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?

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

我已经试验上的图像。你可以尝试在文本太..