[Javascript] ボタンで文章をフェードイン、フェードアウトさせる

ボタンを押した時に文章をフェードイン、フェードアウトさせる。

See the Pen BaLMJaJ by Shotaro Kamimura (@shotarokamimura) on CodePen.

フェードイン・アウトさせる場合

`<!DOCTYPE　html>
<html>
 <head>
  <title>fadeIn</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="fadein.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
    <div class="btn" id = "fadein">fadein</div>
   <div id="text">
    <p>This is test</p>
    <p>This is test button for fade in and fade out</p>
  </div>
<script src=“fadein.js”></script>
</body>
</html>
`

`.btn {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #2b2929;
  border: solid 2px #2b2929;
  border-radius: 3px;
  transition: .4s;
  cursor:pointer;
}
.btn:hover {
background: #2b2929;
color: white;
}
.btn:active {
position: relative;
top: 5px;
box-shadow: none;
}
#text {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}`

`$(function() {
  $('.btn').click(function() {
      if ($('#text').css('opacity') == 0) {
          $('#text').css('opacity', 1);
          $('#text').css('transform', 'translateY(' + -5 + 'px)');
  }
  else {
      $(&#39;#text&#39;).css(&#39;opacity&#39;, 0);
      $(&#39;#text&#39;).css(&#39;transform&#39;, &#39;translateY(&#39; + 5 + &#39;px)&#39;);
  }
});
});
`

フェードインだけさせる場合

See the Pen MWjLjmM by Shotaro Kamimura (@shotarokamimura) on CodePen.

`//jsファイルのみ変更
$(function() {
$(‘.btn’).click(function() {
$(‘#text’).css(‘opacity’, 1);
$(‘#text’).css(‘transform’, ‘translateY(’ + -5 + ‘px)’);
});
});`

全体像を把握する

下記にHTMLとCSS、Javascriptを使ったwebサイトの作り方についての記事をまとめた。

[st-card myclass="" id=3358 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore=“on”]

また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。

[st-card myclass="" id=4587 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore=“on”]