-jq-动画-下拉菜单/-jq-动画-淡入淡出效果-`fadeIn()`-`fadeOut()`-`fadeToggle()`-`fadeTo()`/-jq-动画-自定义动画

最新推荐文章于 2021-10-25 20:50:27 发布

喵帕斯_喵太

最新推荐文章于 2021-10-25 20:50:27 发布

阅读量304

点赞数

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

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

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-jq-动画-下拉菜单

<!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 type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li {
            background-image: url(images/libg.jpg);
        }

        .wrap>ul>li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="javascript:void(0);">一级菜单1</a>
                <ul class="ul">
                    <li><a href="javascript:void(0);">二级菜单11</a></li>
                    <li><a href="javascript:void(0);">二级菜单12</a></li>
                    <li><a href="javascript:void(0);">二级菜单13</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单2</a>
                <ul>
                    <li><a href="javascript:void(0);">二级菜单21</a></li>
                    <li><a href="javascript:void(0);">二级菜单22</a></li>
                    <li><a href="javascript:void(0);">二级菜单23</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单3</a>
                <ul>
                    <li><a href="javascript:void(0);">二级菜单31</a></li>
                    <li><a href="javascript:void(0);">二级菜单32</a></li>
                    <li><a href="javascript:void(0);">二级菜单33</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
        $(function () {
            // 找到一级菜单的a做鼠标移入和移出事件
            const $aes = $('.wrap>ul>li>a')

            // 鼠标移入事件：mouseenter
            $aes.mouseenter(function () {
                // this是具体的a元素
                // console.log(this)

                // 让自己的兄弟：ul显示出来
                $(this).next().slideDown()
            }).mouseleave(function () {
                // 让自己的兄弟：ul收起来
                $(this).next().slideUp()
            })
        })
    </script>
</body>

</html>

示例：
在这里插入图片描述

02-jq-动画-淡入淡出效果-`fadeIn()`-`fadeOut()`-`fadeToggle()`-`fadeTo()`

<!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>
    <button class="btn4">渐进控制</button>
    <div class="box"></div>

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

            // 淡入淡出效果：本质是透明度在改变
            // 自带动画效果：默认是normal，400ms内完成

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

            // 淡出效果：fadeOut()隐藏
            $('.btn2').click(function () {
                // $box.fadeOut()

                // 如何实现先淡出，后加效果，再淡入
                $box.fadeOut(function () {
                    $box.css('backgroundColor', 'green').fadeIn()
                })
            })

            // 转换效果：fadeToggle()
            $('.btn3').click(function () {
                $box.fadeToggle()
            })

            // 控制到指定级别的透明度：fadeTo(速度,指定透明度)
            $('.btn4').click(function () {
                $box.fadeTo('slow', .4, function () {
                    $box.css({ backgroundColor: 'green' })
                    $box.fadeTo('slow', 1)
                })
            })

        })
    </script>
</body>

</html>

注意：
1. // 淡入淡出效果：本质是透明度在改变
// 自带动画效果：默认是normal，400ms内完成
2.淡入效果：fadeIn()显示
2.1.淡出效果：fadeOut()隐藏
2.2.切换效果：fadeToggle()
3.控制到指定级别的透明度：fadeTo(速度,指定透明度)

03-jq-动画-自定义动画

<!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;

            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>

<body>
    <button class="btn1">向右移动到400</button>
    <button class="btn2">向左移动到0</button>
    <button class="btn3">变成圆</button>
    <button class="btn4">同步执行</button>
    <div class="box"></div>

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


            $('.btn1').click(function () {
                // 向右移动到本质：left属性
                // $box.css({ left: 400 })

                $box.animate({ left: 400 })
            })

            $('.btn2').click(function () {
                $box.animate({ left: 0 })
            })

            $('.btn3').click(function () {
                $box.animate({ borderRadius: '50%' })
            })

            $('.btn4').click(function () {
                $box.animate({
                    borderRadius: '50%',
                    left: 400,
                    width: 200,
                    height: 200,
                    backgroundColor: 'green'    // 背景色没有提供动画效果
                })

                // 正方形移动
                $box.animate({
                    top: 400
                })

                $box.animate({
                    left: 0
                })

                $box.animate({
                    top: 100,
                    width: 100,
                    height: 100,
                    borderRadius: '0%'
                })
            })
        })
    </script>
</body>

</html>

示例：
在这里插入图片描述

喵帕斯_喵太

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
-jq-动画-下拉菜单/-jq-动画-淡入淡出效果-`fadeIn()`-`fadeOut()`-`fadeToggle()`-`fadeTo()`/-jq-动画-自定义动画

01-jq-动画-下拉菜单<!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">
复制链接

扫一扫