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

你可能感興趣的文章

[09] JavaScript 入門 - 原型、polyfilling、transpiling、array-like

[09] JavaScript 入門 - 原型、polyfilling、transpiling、array-like

 Eason
[筆記] React.memo / useMemo / useCallback

[筆記] React.memo / useMemo / useCallback

 ianchen6501
用 ES6 語法串接 API - Fetch

用 ES6 語法串接 API - Fetch

 Calon



留言討論