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

我已經試驗上的圖像。你可以嘗試在文本太..