cssで設定した背景画像をフェードインさせる方法

Webページの背景画像をcssで下記のように記述した場合、jQueryでこの画像をfadeInさせるにはどのように書いたらいいのでしょうか。

body {
  background-image: url(../images/sample.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;*/
}

※背景画像は全体に表示させ、画像の上に各要素を配置したいのでcssで背景を設定しました。

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

回答3件

ベストアンサー

コメントにmd使えないのが不便すぎるのでこっちにもポストしておきますね。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Document</title>
6<style>
7body {
8    background-image: url(../images/sample.jpg);
9    background-position: center center;
10    background-repeat: no-repeat;
11    background-attachment: fixed;
12    background-size: cover;
13}
14</style>
15</head>
16<body>
17
18<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
19<script>
20$(function () {
21
22    // bodyにdivを追加
23    $('body').append('<div id="curtain">');
24
25    // 追加したdivを塗りつぶしてから透明化アニメーション
26    $('#curtain').css({
27        position: 'absolute',
28        left: 0, top: 0,
29        width: '100%', height: '100%',
30        backgroundColor: '#fff',
31        opacity: 100
32    }).animate({
33        opacity: 0
34    }, 3000, function () {
35        // アニメーション終了後に自身を消す
36        $(this).remove();
37    });
38
39});
40</script>
41</body>
42</html>

prependをappendに変えてあります。

投稿2016/03/01 01:33

編集2016/03/01 01:37

ogaaaan

総合スコア765

ogaaaan

2016/03/01 01:41

一瞬表示されちゃうことがあるので、その場合はscriptタグをhead内に入れるといいかな。いろいろ試してみてください。

avantgarden

2016/03/01 05:40

ありがとうございます。 scriptタグはhead内に入れたほうが良さそうです。なるほど、逆の発想ですね。大変勉強になりました！

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

CSSに、display: none; を追加して、
$("#image").fadeIn() すればいいのではないでしょうか？

投稿2016/02/29 08:52

root_jp

総合スコア4666

avantgarden

2016/02/29 11:10

すみません、質問をちょっと追記しました。 bodyに対してスタイルをつけているので、回答頂いただいた内容で $(body).fadeIn()とすればいいでしょうか。

avantgarden

2016/02/29 13:29

bodyにdisplay:non;を追加して $('body').fadeIn(3000); としてみましたが、うまくいかないです。

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

jQUeryのanimate()をつかって、アニメーション後のスタイルを指定すればOKですよ。
あらかじめ
opacity: 0 ← 不透明度で0だと透明
を指定しておいて、それを100（つまり不透明）にするアニメーションです。

js
1$('#object').animate({
2    opacity: 100
3}, 3000);

3000 のところはミリ秒で、1秒＝1000です。
3秒かけてアニメーションします。

投稿2016/02/29 08:32

ogaaaan

総合スコア765

avantgarden

2016/02/29 11:10

すみません、質問をちょっと追記しました。 bodyに対してスタイルをつけているので、回答頂いただいた内容で $(body).animate({ opacity: 100 }, 3000); とすればいいでしょうか。

avantgarden

2016/02/29 13:32

記載いただいた内容をbodyに対してやってみまたが、うまくいきませんでした。 ---- cssでbodyにopacity:0;を追加し、 $('body').animate({ opacity: 100 }, 3000); としました。

ogaaaan

2016/03/01 01:28

すいません、これできなくなってますね。というわけで、こんな感じでやってみました。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-image: url(../images/sample.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> <script> $(function () { // body直下にdivを追加 $('body').prepend('<div id="curtain">'); // 追加したdivを塗りつぶしてから透明化アニメーション $('#curtain').css({ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', backgroundColor: '#fff', opacity: 100 }).animate({ opacity: 0 }, 3000, function () { // アニメーション終了後に自身を消す $(this).remove(); }); }); </script> </body> </html> ``` よろしくどうぞ。

ogaaaan

2016/03/01 01:30

コメントにmd記法使えないのマジ不便すぎる・・・・・。 teratailに意見しておいた。

ogaaaan

2016/03/01 01:37

こことは別にコメントしておきましたのでそっちを参照ください。

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

あなたの回答