jQuery fadeInメソッドを使って指定した要素をフェードインするサンプル

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1

構文
.fadeIn( [duration ] [, complete ] )
fadeInメソッドは、要素をフェードインしながら表示します。不透明度(opacity)が増えて表示されます。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

      $("#btntest").click(function() {
        $('#tt').fadeIn(1000);
      });

})
</script>
</head>
<body>
 
<div class="ui stackable fields">
        <a id="tt" style="display: none;">フェードインサンプル</a>
</div>
<input type="button" id="btntest" value="テスト">
</body>
</html>

実行結果
「テスト」ボタンを押すと、要素「#tt」をフェードインします。「フェードインサンプル」文字が表示されます。

jQuery

Posted by arkgame