JQueryのload()をfadeIn()のようなアニメーション表示にしたいです。

例えば、appendであれば、

$("子").appendTo("親").hide().fadeIn(1000);

のようにできるようですが、
loadで同じようなことはできますでしょうか？

2016/08/30 01:54

確認しておきたいのですが、どちらのloadでしょうか？ $.on('load', ...)の省略としての$.loadとAjaxを使ってファイルを読み込み、それを要素に挿入する方の$.loadです。

2016/08/30 02:00

Ajaxでファイルを読み込む方です。

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1$('#target').load('./target.html', function () {
2  $(this).hide().fadeIn(1000);
3});

のように$.loadのコールバックを使えばいいのではないでしょうか？

投稿2016/08/30 01:51

総合スコア545

2016/08/30 01:56

うまくできました！これだと一瞬見えるんじゃないかと思ってやろうともしなかったです・・・。どうもありがとうございました。

行動規範の内容に同意します

単純には

bodyにdisplay:none を設定しておいて

<body style="display:none">

loadで

$("body").fadeIn(1000);

とすれば可能です。

投稿2016/08/30 01:49

総合スコア2604

2016/08/30 01:58

こういうことも考えたのですが（bodyではなく別の要素で）、もっとないかなーと思ってました。ご回答頂きありがとうございました！

2016/08/30 02:12

あ、loadをloadイベントと勘違いしてました。そのloadはあまり使った事ないですが、読み込みに時間がかかるものでは一瞬見えることもあるかも？その場合もスタイルであらかじめ消しておけばいいと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問