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()相似

#前端 #jquery







你可能感興趣的文章

JS30 Day 20 筆記

JS30 Day 20 筆記

Ajax Type Ahead

Ajax Type Ahead

關於 Closure / lexical scope

關於 Closure / lexical scope






留言討論