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

最新推荐文章于 2022-11-11 23:00:55 发布

&XYZ&

最新推荐文章于 2022-11-11 23:00:55 发布

阅读量365

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105261913

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

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>

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之动画系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)

文章目录show 和 hideshow 和 hide<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫

专栏目录