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