web-dev-qa-db-ja.com

ページの読み込み時にjQuery .fadeIn（）？

最初は非表示になっているが、ページが読み込まれた後にフェードインするように、いくつかのコードを設定しようとしています。

次のHTMLコードがあります。

<div class="hidden">
<p>This is some text.</p>
</div>

次に、<div>を隠すこのCSSコードもあります。

div.hidden
{
    display: none
}

最後に、jQueryがあります。

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

私が望むのは、最初の.fadeOut（）がフェードアウトし、removeClassがCSSの非表示を停止し、最後の.fadeIn（）がページにフェードバックすることです。残念ながら、これは機能しませんでした。

ここでコードを表示できます： Fiddle

だから誰かが、ページがロードされるまで<div>を非表示にしてjQueryを使用してフェードインする方法を教えてもらえますか？

ありがとう！

javascriptjqueryhtmlcssfadein
12
user2962388

問題は、fadeInが隠し要素で機能することです。fadeIn()が呼び出される前に隠しクラスを削除すると、要素は完全に表示されるため、fadeIn()には何もありません。

そのはず

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

デモ： フィドル

28
Arun P Johny

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（）アニメーションを変更しますか？

4
eladolo

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);
});
1
Derek 朕會功夫
//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");
    });

画像を試しました。テキストも試してみてください。

0
KAUSTUBH MISHAL