前提・実現したいこと
ここに質問の内容を詳しく書いてください。
簡単な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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/02 07:36
2018/08/02 07:42
2018/08/02 23:39