実現したいこと
フェードアウトというボタンを押すと、画像が１秒間かけて消えて、フェードアウトのボタンがフェードインのボタンに切り替わり、フェードインのボタンをクリックすると、画像が１秒かけて表示される仕組みを作りたいです。
前提
アニメーションをCSSのtransitionを使用せずにJavaScriptのopacityを用いて、作りたいです。
fade Animation関数を用いようと考えています。
発生している問題・エラーメッセージ
まだJavaScriptの知識が浅はかなので、素人でもわかるようにご教授いただけると幸いです。
該当のソースコード
html
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <title>lesson03 アニメーション2</title>6 <link rel="stylesheet" type="text/css" href="base.css">7</head>8<body>9 <div id="wrapper">10 <div class="box">11 <button id="button" type="submit">フェードアウト</button>12 <img id="image" src="./images/outsourcing.jpg" alt="サンプル画像">13 </div>14 </div><!-- wrapper -->15 16 <script>17 function fadeAnimation() {18 }19 </script>20</body>21</html>22
試したこと
Chromeでopacity JavaScriptについて調べ、コードを打ってみたりしたが、反応せず、困っています。
0 コメント