页面加载时jQuery .fadeIn（）？

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

我有以下HTML代码：

 
This is some text.
  

然后我也有这个CSS代码，它隐藏了

。

 div.hidden { display: none } 

最后，我有我的jQuery：

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

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

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

那么有人可以告诉我如何隐藏

直到页面加载，然后使用jQuery淡化它？

谢谢！

Answer 1

问题是fadeIn对隐藏元素有效，当你在fadeIn()之前删除隐藏类时，元素被完全显示，所以没有什么可以去fadeIn()

它应该是

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

演示： 小提琴

Answer 2

HTML代码：

 
 This is some text.  

jquery代码：

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

更改jquery show（）/ hide（）动画？

Answer 3

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

我已经对图像进行了实验。你也可以试试文字..