[解決済み] 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');
});
デモの様子 フィドル
関連
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】Vueが定義されていない
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】Javascript:getElementById対getElementsById(両方が別のページで動作する)。
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み] jQueryで、ユーザーがそのフィールドを編集している間、テキストフィールドの最初の文字を大文字にするにはどうすればよいですか?
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み】 \u003C とは何ですか?