js で　2枚の画像をフェードを利用して交互に表示する

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
簡単なjavascriptで、2つの画像を交互に表示させるプログラムを作りたいです。
gifアニメーションと同じですが、画質の関係からjpeg画像の交互表示を実現します。

https://teratail.com/questions/40598#reply-65063
これを参考に以下で作りました。

###発生している問題
それぞれの画像がフェードアウト・フェードインされていない状況です。
2つの画像の表示には成功しています。
（cssにそれぞれフェードがうまく行ってなかったため、位置補正はまだしていません。）

該当のソースコード

html
1<head>
2    <title>Untitled Document</title>
3    <meta charset="UTF-8">
4    <meta name="description" content="" />
5    <meta name="keywords" content="" />
6
7
8    <link href="./index.css" rel="stylesheet" media="all" type="text/css" />
9    <script src="./index.js" type="text/javascript"></script>
10</head>
11
12<body>
13    
14    <div id="a"><img src="./images/image01.jpg"></div>
15    <div id="b"><img src="./images/image01.jpg"></div>
16    
17</body>

css
1#a {
2    background-color: rgba(0, 0, 0, 0.9);
3    width: 100px;
4    height: 100px;
5    transition: all 3s ease 3s;
6}
7
8#a.fade {
9    background-color: rgba(0, 0, 0, 0);
10}
11
12#b {
13    background-color: rgba(0, 0, 0, 0);
14    width: 100px;
15    height: 100px;
16    transition: all 3s ease 3s;
17}
18
19#b.fade {
20    background-color: rgba(0, 0, 0, 0.9);
21}
22
23

js
1$(function(){
2    $('#a').addClass('fade');
3});
4$(function(){
5    $('#b').addClass('fade');
6});

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

回答1件

ベストアンサー

img要素に指定した画像や、文字は「前景」
background-color: rgba(0, 0, 0, 0);は「背景」色の変更。

当然前景は背景より前にくるので、
背景色を黒から透明にしても期待した効果は得られないよね。

CSSのopacityを変更するように変えてみたら解決するんじゃない？

【おまけ】背景を無理やり前に持ってくるネタ

CSSには:beforeや:afterという疑似要素があって、
それを強引に手前に展開させてやれば本文の前景より手前に背景持ってこれるよねというネタ。

例えば下のように書けば実現出来ると思うけど、CSSが汚れた感はあるから気をつけて使ってね。

CSS
1#a {
2    position: relative;
3    width: 100px;
4    height: 100px;
5}
6#a:before {
7    content: "";
8    display: block;
9    position: absolute;
10    top: 0;
11    right: 0;
12    bottom: 0;
13    left: 0;
14    background-color: rgba(0, 0, 0, 0.9);
15    transition: all 3s ease 3s;
16}
17#a.fade:before {
18    background-color: rgba(0, 0, 0, 0);
19}

投稿2018/08/02 06:21

編集2018/08/02 06:26

miyabi-sun

総合スコア21158

mare1428

2018/08/02 07:36

なるほど、background　には気づかずそのまま使おうと思っていました。 opacity と transition だけで（jsは使わずに）gifのようなループするアニメーションまでいけるのでしょうか？

miyabi-sun

2018/08/02 07:42

可能。 http://www.htmq.com/css3/#anim CSS3リファレンスのアニメーションの欄を確認すれば出来る事はわかるんだけど、例えば3秒毎にAとBの画像を切替えたければ、Aは6秒かけて表示→非表示→表示になるように設定して、 Bは6秒かけて非表示→表示→非表示を切り替えればいい。また、AとBはposition: absoluteを設定して同じ位置に2枚を重ねるようにすれば両方の画像がふわんふわんと交互に表示されているかのように見えると思うよ。

mare1428

2018/08/02 23:39

ありがとうございます。まずやってみます！

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