1. ホーム
  2. javascript

[解決済み] jQuery .fadeIn() on page load?

2022-02-18 08:34:34

質問

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

以下のような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を使ってフェードインさせますか?

ありがとうございます。

解決方法は?

問題点は fadeIn は hidden 要素で動作しますが、hidden クラスを削除してから fadeIn() が呼び出されると、要素は完全に表示されるので fadeIn()

であるべきです。

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

デモの様子 フィドル