2.03.24_2jQuery的动画函数

2.03.24 jQuery的动画函数

1.jQuery的动画函数

  1. jq对象.show()
  2. jq对象.hide()
  3. 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>   
  1. jq对象.fadeIn()
  2. jq对象.fadeOut()
  3. 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>
  1. jq对象.slideDown()
  2. jq对象.slideUp()
  3. 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)
        })
  1. 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>
  1. 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()后,停止了动画,清除了延迟函数,就使得效果更为正常。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值