サブノート

技術的なトピックが中心の備忘録

[JavaScript]フェードインしながら表示する

javascript jquery

フェードインして表示する場合、opacity（不透明度）を0→1に変更する。

HTML

<html>

  <head>
    <script type="text/javascript" src="./js/jquery.js"></script>
  </head>

  <body>
    <button onclick="fadein();">フェードインさせる</button>
    <br>
    <span id="fadeintext" style="display: none;">フェードインテキスト</span>
  </body>

</html>

JavaScript

function fadein() {

  var target = $('#fadeintext');

  target.css({opacity : '0'});
  target.show();
  target.animate({opacity : '1'});

}