jQuery初學筆記-2

ping in 六角學院實習培育計畫

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



ping

你可能感興趣的文章

[vue] transition 介紹與巢狀用法

[vue] transition 介紹與巢狀用法

 vii120
[JS] 浮點數精度問題

[JS] 浮點數精度問題

 mike-hsieh
程式導師實驗計畫 FE102

程式導師實驗計畫 FE102

 YongChenSu



留言討論