-jq-动画-显示与隐藏-`show()`-`hide()`-`toggle()`/-jq-动画-滑动效果-`slideDown()`-`slideUp()`-`slideToggle()`

最新推荐文章于 2024-03-31 03:12:42 发布

喵帕斯_喵太

最新推荐文章于 2024-03-31 03:12:42 发布

阅读量177

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116542991

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-jq-动画-显示与隐藏-`show()`-`hide()`-`toggle()`

        .box {
            width: 100px;
            height: 100px;
            background-color: red;

            display: none;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <button class="btn1">显示</button>
    <button class="btn2">隐藏</button>
    <button class="btn3">转换</button>
    <div class="box"></div>

    <script>
        $(function () {
            const $box = $('.box')

            // 显示：show()
            $('.btn1').click(function () {
                // $box.show()  // 没有参数，没有动画

                // 需要给速度参数：fast,normal,slow
                // $box.show('fast')
                // $box.show('slow')
                // $box.show(2000)

                // 第二个参数：动画规则
                // $box.show('slow', 'swing')
                // $box.show('slow', 'linear')
                // 一般不用第二个参数

                // 第三个参数：回调函数
                // $box.show('slow', 'linear', function () {
                //     // console.log(this)
                //     this.innerText = '前端小白'
                // })

                // 实际使用的时候，通常会省略第二个
                $box.show('slow', function () {
                    // console.log(this)
                    this.innerText = '前端小白'
                })

                // show的内部做了判断：判断参数的类型到底是字符串还是函数，是函数就直接当做回调，是字符串就当做效果
            })


            // 隐藏：hide()，使用规则与show的规则一样
            $('.btn2').click(function () {
                $box.hide('fast')
            })

            // 切换：toggle()，规则也是一样
            $('.btn3').click(function () {
                $box.toggle('fast')
            })

            // 显示与隐藏动画的特点：如果没给速度参数，默认是没有动画效果的
        })
    </script>
</body>

注意：
1.显示与隐藏动画的特点：如果没给速度参数，默认是没有动画效果的
2.需要给速度参数：fast,normal,slow
示例：
在这里插入图片描述

02-jq-动画-滑动效果-`slideDown()`-`slideUp()`-`slideToggle()`

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;

            display: none;
        }
    </style>
</head>

<body>
    <button class="btn1">显示</button>
    <button class="btn2">隐藏</button>
    <button class="btn3">转换</button>
    <div class="box"></div>

    <script>
        $(function () {
            const $box = $('.box')

            // 滑动效果：本质是高度在改变
            // 自带动画效果：默认是normal，400ms内完成

            // 滑入效果：slideDown()显示
            $('.btn1').click(function () {
                $box.slideDown()
            })

            // 滑出效果：slideUp()收起
            $('.btn2').click(function () {
                $box.slideUp()
            })

            // 转换效果：slideToggle()
            $('.btn3').click(function () {
                $box.slideToggle()
            })
        })
    </script>
</body>

</html>