jQuery之動畫系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)

原創

2020-04-13 21:16

文章目錄

show 和 hide

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知"心"</title>
    <style>
        p {
            width: 100px;
            border: 1px solid #ff0000;
        }

        ul {
            list-style: none;
            display: none;
        }
    </style>
</head>

<body>
    <div class="demo">
        <p>hide和show</p>
        <ul>
            <li>11111111111</li>
            <li>22222222222</li>
            <li>33333333333</li>
        </ul>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //show:鼠標移入p標籤使ul顯示出來
    /*
        show和hide：
            第一個參數：是動畫完成過程的時間
            第二個參數：是運動方式
    */
    $('p').on('mouseenter', function () {
        $(this).next().show(1000, 'swing')
    })

    //hide:鼠標移出ul標籤使ul隱藏起來
    $('.demo').on('mouseleave', function () {
        $('p').next().hide(3000, 'linear')
    })
</script>

</html>

fadeIn 和 fadeOut

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知"心"</title>
    <style>
        p {
            width: 100px;
            border: 1px solid #ff0000;
        }

        ul {
            list-style: none;
            display: none;
        }
    </style>
</head>

<body>
    <div class="demo">
        <p>動畫</p>
        <ul>
            <li>11111111111</li>
            <li>22222222222</li>
            <li>33333333333</li>
        </ul>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    fadeIn : 淡入
    fadeOut ：淡出
    這兩個都只是改變透明度的。
    */
    $('p').on('click', function () {
        if ($(this).next().css('display') == 'none') {
            $(this).next().fadeIn()
        } else {
            $(this).next().fadeOut()
        }
    })
</script>

</html>

fadeToggle

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知"心"</title>
    <style>
        p {
            width: 100px;
            border: 1px solid #ff0000;
        }

        ul {
            list-style: none;
            display: none;
        }
    </style>
</head>

<body>
    <div class="demo">
        <p>動畫</p>
        <ul>
            <li>11111111111</li>
            <li>22222222222</li>
            <li>33333333333</li>
        </ul>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    fadeToggle方法：集合了fadeIn（淡入）和fadeOut（淡出）;
    fadeToggle的第一個參數是：指定變化的時間；
    */
    $('p').on('click', function () {
        $(this).next().fadeToggle(3000)
    })
</script>

</html>

fadeTo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知"心"</title>
    <style>
        p {
            width: 100px;
            border: 1px solid #ff0000;
        }

        ul {
            list-style: none;
            display: none;
        }
    </style>
</head>

<body>
    <div class="demo">
        <p>動畫</p>
        <ul>
            <li>11111111111</li>
            <li>22222222222</li>
            <li>33333333333</li>
        </ul>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    fadeTo : 運動到（條件）開始執行,這個條件就是第二個參數透明度;
    第一個參數是：運動的時間;
    第二個參數是：透明度;
    第三個參數是：運動方式
    */
    $('p').on('click', function () {
        if ($(this).next().css('display') == 'none') {
            $(this).next().fadeTo(1500, 0.7, 'swing', function () {
                console.log("fadeTo1")
            })
        } else {
            $(this).next().fadeTo(1500, 0.1, 'swing', function () {
                console.log("fadeTo2")
            })
        }
    })
</script>

</html>

slideDown 和 slideUp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知"心"</title>
    <style>
        p {
            width: 100px;
            border: 1px solid #ff0000;
        }

        ul {
            list-style: none;
            display: none;
        }
    </style>
</head>

<body>
    <div class="demo">
        <p>動畫</p>
        <ul>
            <li>11111111111</li>
            <li>22222222222</li>
            <li>33333333333</li>
        </ul>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    slideDown :（卷出：從上到下顯示）
    slideUp : （捲入：從下到上隱藏）
    */
    $('p').on('click', function () {
        if ($(this).next().css('display') == 'none') {
            $(this).next().slideDown(1500, 'swing', function () {
                console.log("slideDown")
            })
        } else {
            $(this).next().slideUp(1500, 'swing', function () {
                console.log("slideUp")
            })
        }
    })
</script>
</html>

slideToggle

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知"心"</title>
    <style>
        p {
            width: 100px;
            border: 1px solid #ff0000;
        }

        ul {
            list-style: none;
            display: none;
        }
    </style>
</head>

<body>
    <div class="demo">
        <p>動畫</p>
        <ul>
            <li>11111111111</li>
            <li>22222222222</li>
            <li>33333333333</li>
        </ul>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
    slideToggle : 集合了 slideDown :（卷出：從上到下顯示）和 slideUp : （捲入：從下到山隱藏）
    */
    $('p').on('click', function () {
        $(this).next().slideToggle(1500)
    })
</script>

</html>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

jQuery之動畫系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)

文章目錄

show 和 hide

fadeIn 和 fadeOut

fadeToggle

fadeTo

slideDown 和 slideUp

slideToggle

盒模型及盒模型應用

VSCode快速編輯html(Emmet)

jQuery之工具方法extend插件擴展

數據結構之核心基礎之線性結構

微信 URL Scheme詳細參數、判斷是否爲微信內置瀏覽器

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結