前端小白的学习之路(jQuery 二)

吃清心的椰羊

已于 2024-03-07 16:00:11 修改

阅读量329

点赞数 6

文章标签：学习

于 2024-03-06 18:45:01 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_245249828/article/details/136507188

版权

简介：动画相关API，拓展插件简介

文章目录

动画函数
- 预定义CSS属性的动画函数
  - show() 与 hide():显示与隐藏
  - toggle(): 切换显示与隐藏
  - fadeIn()与fadeOut():淡入与淡出
  - slideUp() 与 slideDown() : 向上滑动消失和向下滑动显示
- 自定义CSS属性的动画函数
- 两个小案例
  - 动画效果下拉菜单
  - 导航边框动画效果

动画函数

1）预定义CSS属性的动画函数

案例主体

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style>
        .box {
            height: 600px;
            width: 400px;
            background-color: #f00;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div>
        <button class="btn-enter">显示（入场）</button>
        <button class="btn-leave">隐藏（离场）</button>
        <button class="btn-open-or-close">开关</button>
    </div>

    <div>
        <button class="btn-fade-in">淡入（入场）</button>
        <button class="btn-fade-out">淡出（离场）</button>
    </div>

    <div>
        <button class="btn-slide-down">下拉（入场）</button>
        <button class="btn-slide-up">收起（离场）</button>
    </div>

    <div class="box"></div>



    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>
        // 动画： 在JS往往理解标签从显示到隐藏，或从隐藏到显示的过程。


       
    </script>
</body>

</html>

1.show() 与 hide():显示与隐藏

//给show 或 hide 传递参数，毫秒值 / 回调函数
// 主要是控制标签的宽度 高度 透明度 最后dispay为none
$(".btn-enter").on("click", function () {
    // $(".box").show(5000);
    // 动画结束就执行function
    $(".box").show(1000, function () {
        console.log("显示标签的动画完成")
    });
})

//给show 或 hide 传递参数，slow | fast / 回调函数
$(".btn-leave").on("click", function () {
    // $(".box").hide(1000);
    $(".box").hide("fast");
})

2.toggle(): 切换显示与隐藏

// 原状态是显示的，调用这个api就隐藏； 否则反之
$(".btn-open-or-close").on("click", function () {
    $(".box").toggle(1000);
})

3.fadeIn()与fadeOut():淡入与淡出

//给fadeIn 或 fadeOut 传递参数，毫秒值 / 回调函数
// 主要是控制标签的透明度 最后dispay为none
$(".btn-fade-in").on("click", function () {
    // 显示
    $(".box").fadeIn(5000);
})
$(".btn-fade-out").on("click", function () {
    // 隐藏
    $(".box").fadeOut(5000);
})

4.slideUp() 与 slideDown() : 向上滑动消失和向下滑动显示

//给fadeIn 或 fadeOut 传递参数，毫秒值 / 回调函数
// 主要是控制标签的高度 最后dispay为none
$(".btn-slide-down").on("click", function () {
    // 显示
    $(".box").slideDown(5000);
})
$(".btn-slide-up").on("click", function () {
    // 隐藏
    $(".box").slideUp(5000);
})

2) 自定义CSS属性的动画函数

animate() 是 jQuery 中用于执行动画效果的函数之一，它可以动态的改变元素的样式属性值，从而创建各种动画效果。这个函数允许你以一个或多个样式属性的目标值进行动画处理。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <button class="btn-start">开始动画</button>
    <button class="btn-restore">还原</button>
    <button class="btn-stop">停止动画</button>

    <div class="box"></div>

    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>

        // CSS属性可以自定义的动画
        $(".btn-start").on("click",function(){
            // 执行动画
            $(".box").animate({
                marginLeft: 500,
                width: 200,
                height: 200,
                borderRadius: "50px"
            },3000)
        })


        $(".btn-restore").on("click",function(){
             // 执行动画
             $(".box").animate({
                marginLeft: 0,
                width: 100,
                height: 100,
                borderRadius: "0px"
            },1000)
        })


        $(".btn-stop").on("click",function(){
            // 停止动画
            $(".box").stop();
        })

    </script>
</body>
</html>

3) 两个小案例

1.动画效果下拉菜单

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .menu {
            width: 1000px;
            height: 100px;
            margin: 50px;
        }

        .menu ul {
            display: flex;
        }

        .menu ul>li {
            width: 150px;
        }

        .menu ul>li div {
            height: 50px;
            line-height: 50px;
            background-color: rgba(160, 156, 156, .7);
            cursor: pointer;
        }

        .menu ul>li div:hover {
            background-color: rgba(160, 156, 156, 1);
        }

        .menu ul>li ol {
            width: 100%;
            /* 
            overflow: hidden;
            height: 0; 
            */
            display: none;
        }

        .menu ul>li ol li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .menu ul>li ol li:hover {
            background-color: #ccc;
        }
    </style>
</head>

<body>

    <div class="menu">
        <ul>
            <li>
                <div class="title">菜单导航A</div>
                <ol>
                    <li>菜单选项a1</li>
                    <li>菜单选项b1</li>
                    <li>菜单选项c1</li>
                </ol>
            </li>
            <li>
                <div class="title">菜单导航B</div>
                <ol>
                    <li>菜单选项a2</li>
                    <li>菜单选项b2</li>
                    <li>菜单选项c2</li>
                </ol>
            </li>
            <li>
                <div class="title">菜单导航C</div>
                <ol>
                    <li>菜单选项a3</li>
                    <li>菜单选项b3</li>
                    <li>菜单选项c3</li>
                </ol>
            </li>
            <li>
                <div class="title">菜单导航D</div>
                <ol>
                    <li>菜单选项a4</li>
                    <li>菜单选项b4</li>
                    <li>菜单选项c4</li>
                </ol>
            </li>
        </ul>
    </div>

    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>
        $(function () {
            // 需求：
            // 用户鼠标移入“导航菜单”，就可以动画下拉显示“菜单选项”列表
            // 用户鼠标离开当前这个导航，就可以动画收起隐藏“菜单选项”列表

            // 编码:
            // $(".menu").find(".title")
            // 用户鼠标移入“导航菜单”
            $(".title").on("mouseenter", function () {
                // console.log("test");
                // 动画下拉显示“菜单选项”列表
                // 错误的逻辑
                // $(".menu ol").slideDown();
                // 正确的
                $(this).next().stop().slideDown();//先暂停当前动画再执行动画函数
            })

            // 用户鼠标离开当前这个导航
            $(".menu ul > li").on("mouseleave", function () {
                // console.log('test');
                // 动画收起隐藏“菜单选项”列表
                $(this).find("ol").stop().slideUp();
            })
        })

    </script>
</body>

</html>

2.导航边框动画效果

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .nav {
            margin: 200px;
            display: flex;
            width: 1200px;
        }
        .nav li {
            width: 150px;
            height: 50px;
            /* border: 4px solid #ccc;  */
            cursor: pointer;
            text-align: center;
            line-height: 50px;
            text-align: center;
            position: relative;
            overflow: hidden;
            margin: 0 10px;
            /* 改变盒子大小计算方式 */
            /* box-sizing: border-box; */
            /* 阴影: 水平偏移量 垂直偏移量 模糊度  延申量  阴影颜色 内阴影  */
            box-shadow: 0        0       2px     4px   #ccc    inset;
        }
        .nav li .line {
            position: absolute;
        }
        .nav li .t {
            width: 150px;
            height: 4px;
            background-color: red;
            top: 0px;
            left: -150px;
            z-index: 1;
        }
        .nav li .l {
            width: 4px;
            height: 50px;
            left: 0px;
            top: 50px;
            background-color: pink;
            z-index: 4;
        }
        .nav li .b {
            width: 150px;
            height: 4px;
            background-color: green;
            bottom: 0px;
            left: 150px;
            z-index: 5;
        }
        .nav li .r {
            width: 4px;
            height: 50px;
            right: 0px;
            top: -50px;
            background-color: purple;
            z-index: 2;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <div class="line t"></div>
            <div class="line r"></div>
            <div class="line b"></div>
            <div class="line l"></div>
            <div class="text">导航A</div>
        </li>

        <li>
            <div class="line t"></div>
            <div class="line r"></div>
            <div class="line b"></div>
            <div class="line l"></div>
            <div class="text">导航B</div>
        </li>


        <li>
            <div class="line t"></div>
            <div class="line r"></div>
            <div class="line b"></div>
            <div class="line l"></div>
            <div class="text">导航C</div>
        </li>

        <li>
            <div class="line t"></div>
            <div class="line r"></div>
            <div class="line b"></div>
            <div class="line l"></div>
            <div class="text">导航D</div>
        </li>
       
    </ul>

    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>
        // 需求： 设置导航边框导航
        $(".nav li").on("mouseenter",function(){
            // 显示边框（动画入场）
            $(this).find(".t").stop().animate({left:0},500);
            $(this).find(".b").stop().animate({left:0},500);
            $(this).find(".l").stop().animate({top:0},500);
            $(this).find(".r").stop().animate({top:0},500);
        })

        $(".nav li").on("mouseleave",function(){
            // 隐藏边框（动画离场）
           $(this).find(".t").stop().animate({left:-150},500);
           $(this).find(".b").stop().animate({left:150},500);
           $(this).find(".l").stop().animate({top:50},500);
           $(this).find(".r").stop().animate({top:-50},500);
        })

    </script>
</body>
</html>