[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 {
          $('#text').css('opacity', 0);
          $('#text').css('transform', 'translateY(' + 5 + 'px)');
      }
  });
});


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

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”]