頁面加載時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（）會將它淡化回頁面。 不幸的是，這不起作用。

你可以在這里查看代碼： 小提琴

那么有人可以告訴我如何隱藏<div>直到頁面加載，然后使用jQuery淡化它？

謝謝！

Answer 1

問題是fadeIn對隱藏元素有效，當你在fadeIn()之前刪除隱藏類時，元素被完全顯示，所以沒有什么可以去fadeIn()

它應該是

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

演示： 小提琴

Answer 2

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

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

我已經對圖像進行了實驗。你也可以試一下文字..