jQuery fadeInメソッドとfadeOutメソッドのサンプル
環境
jquery 3.6.
Google Chrome 107.0.5304.107
構文
フェードアウト
$(“セレクター名").fadeOut();
fadeOutメソッドでフェードアウトしながら非表示にします。
フェードイン
$(“セレクター名").fadeIn();
fadeInメソッドでフェードインしながら表示します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
div {background-color:skyblue;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btns").click(function() {
// フェードアウト
$("#cft").fadeOut();
// フェードイン
$("#cft").fadeIn();
});
});
</script>
</head>
<body>
<div id="cft">test message </div>
<input type="button" value="確認" id="btns" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {background-color:skyblue;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btns").click(function() {
// フェードアウト
$("#cft").fadeOut();
// フェードイン
$("#cft").fadeIn();
});
});
</script>
</head>
<body>
<div id="cft">test message </div>
<input type="button" value="確認" id="btns" />
</body>
</html>
<!DOCTYPE html> <html> <head> <style> div {background-color:skyblue;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btns").click(function() { // フェードアウト $("#cft").fadeOut(); // フェードイン $("#cft").fadeIn(); }); }); </script> </head> <body> <div id="cft">test message </div> <input type="button" value="確認" id="btns" /> </body> </html>
結果
ボタン「確認」を押すとフェードアウトしながらdiv要素の文字を非表示にした後、フェードインしながらdiv要素の文字を表示します。