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>
<!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>
<!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」をフェードインします。「フェードインサンプル」文字が表示されます。