jQuery toggleメソッドで表示(非表示)の秒数を設定するサンプル
環境
jquery 3.6.0
Google Chrome 107.0.5304.107
構文
$(“#セレクタID名").toggle(ミリ秒);
toggleメソッドを使って、指定ミリ秒かけて文字を表示(非表示)にします。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 初期表示は非表示にする
$('#tt').toggle();
$("#btnk").click(function() {
//2秒(2000ミリ秒)かけて表示/非表示
$("#tt").toggle(2000);
});
});
</script>
</head>
<body>
<p id="tt">test message </p>
<input type="button" id="btnk" value="確認" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 初期表示は非表示にする
$('#tt').toggle();
$("#btnk").click(function() {
//2秒(2000ミリ秒)かけて表示/非表示
$("#tt").toggle(2000);
});
});
</script>
</head>
<body>
<p id="tt">test message </p>
<input type="button" id="btnk" value="確認" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 初期表示は非表示にする
$('#tt').toggle();
$("#btnk").click(function() {
//2秒(2000ミリ秒)かけて表示/非表示
$("#tt").toggle(2000);
});
});
</script>
</head>
<body>
<p id="tt">test message </p>
<input type="button" id="btnk" value="確認" />
</body>
</html>
結果
「確認」ボタンを押すと、2秒かけて「test message」を表示/非表示にします。