slideUp()收合、slideDown()展開、slideToggle()
//html,css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<script src="js_note2.js"></script>
<style>
.text {
display: none;
}
</style>
</head>
<body>
<input type="button" class="button" value="留言">
<div class="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="送出">
</div>
</body>
</html>
//jQuery
$(document).ready(function() {
$('.button').click(function() {
$('.text').slideDown(1000); //按下按鈕把留言區打開//1000=1000毫秒=1秒
})
})
slideUp()將原本打開的關起來
slideToggle()則是自行判斷，如果原本打開那就關閉，如果原本關閉那就打開
fadeIn()淡入、fadeOut()淡出、fadeToggle()
//html,css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<script src="js_note2.js"></script>
<style>
.text {
display: none;
}
</style>
</head>
<body>
<input type="button" class="button" value="留言">
<div class="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="送出">
</div>
</body>
</html>
//jQuery
$(document).ready(function() {
$('.button').click(function() {
$('.text').fadeIn(1000); //按下按鈕留言區淡入
})
})
fadeIn()淡入、fadeOut()淡出、fadeToggle()意思和slideToggle()相似
