2.03.24_2jQuery的动画函数

以哲_ok

于 2022-05-13 20:17:32 发布

阅读量228

点赞数

文章标签：动画 jquery javascript

本文链接：https://blog.csdn.net/m0_59593735/article/details/124759151

版权

2.03.24 jQuery的动画函数

1.jQuery的动画函数

jq对象.show()
jq对象.hide()
jq对象.toggle()

改变宽高透明度
语法：

    <style>
        button {
            padding: 5px 20px;
        }
        .box {
            width: 150px;
            height: 110px;
            background-color: red;
        }
    </style>
    <button class="btn-1">显示</button>
    <button class="btn-2">隐藏</button>
    <button class="btn-3">切换</button>
    <div class="box"></div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

        // 改变元素的宽度和高度和透明度
        // $(".box").hide();// 隐藏元素
        // $(".box").show();//显示元素
        // $(".box").toggle();//切换显示和隐藏

        // 参数：
            // 毫秒、"fast"、"slow"
        // 演示
        $(".btn-1").click(function(){
            // 添加时间毫秒值 就可以执行动画
            $(".box").show(500)
        });
        $(".btn-2").click(function(){
            // 添加时间毫秒值 就可以执行动画
            $(".box").hide(500)
        });
        $(".btn-3").click(function(){
            // 添加时间毫秒值 就可以执行动画
            $(".box").toggle()
        });

</script>

jq对象.fadeIn()
jq对象.fadeOut()
jq对象.fadeToggle()

改变透明度
语法：

    <style>
        button {
            padding: 5px 20px;
        }
        .box {
            width: 150px;
            height: 110px;
            background-color: red;
        }
    </style>

    <button class="btn-1">显示</button>
    <button class="btn-2">隐藏</button>
    <button class="btn-3">切换</button>
    <div class="box"></div>

    <script src='./jquery/jquery-3.6.0.min.js'></script>
    <script>
        // 改变元素的透亮度
        // $(".box").fadeOut();// 淡出
        // $(".box").fadeIn();//淡入
        // $(".box").fadeToggle();//切换淡入和淡出

        // 参数：
            // 毫秒、"fast"、"slow"
        // 演示
        $(".btn-1").click(function(){//显示
            // 添加时间毫秒值 就可以执行动画
            $(".box").fadeIn(1500)
        })
        $(".btn-2").click(function(){
            // 添加时间毫秒值 就可以执行动画
            $(".box").fadeOut(1500)
        })
        $(".btn-3").click(function(){
            // 添加时间毫秒值 就可以执行动画
            $(".box").fadeToggle(1500)
        })

    </script>

jq对象.slideDown()
jq对象.slideUp()
jq对象.slideToggle()

改变高
语法：

    <style>
        button {
            padding: 5px 20px;
        }
        .box {
            width: 150px;
            height: 110px;
            background-color: red;
        }
    </style>

    <button class="btn-1">显示</button>
    <button class="btn-2">隐藏</button>
    <button class="btn-3">切换</button>
    <div class="box"></div>

    <script src='./jquery/jquery-3.6.0.min.js'></script>
    <script>
        // 主要改变元素的高度
        // $(".box").slideDown();//  下拉显示
        // $(".box").slideUp();// 收起隐藏
        // $(".box").slideToggle();//切换淡入和淡出

        // 参数：
            // 毫秒、"fast"、"slow"
        // 演示
        $(".btn-1").click(function(){//显示
            // 添加时间毫秒值 就可以执行动画
            $(".box").slideDown(1500)
        })
        $(".btn-2").click(function(){
            // 添加时间毫秒值 就可以执行动画
            $(".box").slideUp(1500)
        })
        $(".btn-3").click(function(){
            // 添加时间毫秒值 就可以执行动画
            $(".box").slideToggle(1500)
        })

jq对象.animate()

语法：

    <style>
        button {
            padding: 10px 20px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

    <button class="btn-1">执行动画（显示）</button>
    <button class="btn-2">执行动画（隐藏）</button>
    <div class="box"></div>

    <script src="./jquery/jquery-3.6.0.js"></script>
    <script>
        $(".btn-1").click(function () {
            // 执行动画
            // 参数1： css属性对象
            // 参数2： 完成动画所需的毫秒值
            // 参数3：回调函数（可选）
            $(".box").animate(
                {
                    width: 300,
                    height: 200
                },
                1000,
                function () {
                    console.log("完成动画，执行回调函数1")
                })
        })
        $(".btn-2").click(function () {
            // 执行动画
            // 参数1： css属性对象
            // 参数2： 完成动画所需的毫秒值
            // 参数3：回调函数（可选）
            $(".box").animate(
                {
                    width: 0,
                    height: 0
                },
                1000,
                function () {
                    console.log("完成动画，执行回调函数2")
                })
        })
    </script>

jq对象.stop()

stop函数有停止动画的功能，停止当前jq对象的animate()动画函数
比如：下面例子中，一段时间里快速频繁地鼠标进出一级菜单容器后，鼠标静止，会看到动画还在持续运动一段时间

    <style>
        body {
            margin: 0;
        }
        ul , ol {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
        }
        .my-header {
            height: 100px;
            border-bottom: 3px solid #000;  
        }
        .my-header ul {
            height: 100px;
        }
        .my-header ul > li {
            width: 120px;
            float: left;
            margin: 30px 30px;
        }
        .my-header-title {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: skyblue;
            cursor: pointer;
            font-weight: bold;
        }
        .my-header-content {
            width: 140px;
            display: none;
            background-color: #f0f0f0;
        }
        .my-header-content li {
            padding-left: 20px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
        }
        .my-header-content li:hover {
            background-color: skyblue;
            color: #fff;
        }
    </style>

    <header class="my-header">
        <div class="container">
            <ul class="menu-box">
                <li>
                    <div class="my-header-title">一级菜单</div>
                    <ol class="my-header-content">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ol>
                </li>
        </div>
    </header>

    <script src='../../jq/jquery-3.6.0.min.js'></script>
    <script>
        // 需求：
            // 制作动画的下拉菜单
        // 编码：
        // 获取元素，绑定事件（鼠标移入）
         $(".menu-box").on('mouseenter','.my-header-title',function(){
            // 显示当前标签的下一个元素
            $(this).next(".my-header-content").slideDown(500);
            console.log("mouseenter");
        })

        // 获取元素，绑定事件（鼠标移出）
        $(".container").on('mouseleave','.menu-box > li ',function(){
            // 寻找当前标签的后代元素
            $(this).find(".my-header-content").slideUp(500);
            console.log("mouseleave");
        })


        // .stop() 停止动画的作用
        /*         
        // 获取元素，绑定事件（鼠标移入）
        $(".menu-box").on('mouseenter','.my-header-title',function(){
            // 显示当前标签的下一个元素
            $(this).next(".my-header-content").stop().slideDown(500);
            console.log("mouseenter");
        })

        // 获取元素，绑定事件（鼠标移出）
        $(".container").on('mouseleave','.menu-box > li ',function(){
            // 寻找当前标签的后代元素
            $(this).find(".my-header-content").stop().slideUp(500);
            console.log("mouseleave");
        }) 
        */

    </script>

给上面代码加了stop()函数就不会有这种情况
原因：回归原生的JS可知，动画是因为有延迟函数才会产生效果，没有stop()的情况下频繁触发动画，使得不断产生延迟函数，所以，才会在鼠标静止下来了，动画还在动的情况，加了stop()后，停止了动画，清除了延迟函数，就使得效果更为正常。

以哲_ok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.03.24_2jQuery的动画函数

2.03.24 jQuery的动画函数1.jQuery的动画函数jq对象.show()jq对象.hide()jq对象.toggle()改变宽高透明度语法： <style> button { padding: 5px 20px; } .box { width: 150px; height: 110px; background-c
复制链接

扫一扫