48-jQuery动画详解

2,811次阅读
没有评论

共计 6895 个字符，预计需要花费 18 分钟才能阅读完成。

前言

jQuery 提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

显示动画

方式一：

	$("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过 display: block; 实现的。

方式二：

	$("div").show(2000);

解释：通过控制元素的宽高、透明度、display 属性，逐渐显示，2 秒后显示完毕。

效果如下：

48-jQuery 动画详解

方式三：

	$("div").show("slow");

参数可以是：

  • slow 慢：600ms

  • normal 正常：400ms

  • fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display 属性，逐渐显示。

方式四：

    //show(毫秒值，回调函数;
    $("div").show(5000,function () {alert(" 动画执行完毕！");
    });

解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

隐藏动画

方式参照上面的 show()方法的方式。如下：

	$(selector).hide();

	$(selector).hide(1000);

	$(selector).hide("slow");

	$(selector).hide(1000, function(){});

显示和隐藏的来回切换：

显示和隐藏的来回切换采用的是 toggle()方法：就是先执行 show()，再执行 hide()。

同样是四种方式：

$(selector).toggle();

滑入和滑出

1、滑入动画效果：（类似于生活中的卷帘门）

	$(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400 毫秒（同样适用于 fadeIn/slideDown/slideUp）

2 滑出动画效果：

	$(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

3、滑入滑出切换动画效果：

	$(selector).slideToggle(speed, 回调函数);

参数解释同 show()方法。

举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            // 点击按钮后产生动画
            $("button:eq(0)").click(function () {// 滑入动画：slideDown(毫秒值，回调函数[显示完毕执行什么]);
                $("div").slideDown(2000, function () {alert(" 动画执行完毕！");
                });
            })

            // 滑出动画
            $("button:eq(1)").click(function () {// 滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
                $("div").slideUp(2000, function () {alert(" 动画执行完毕！");
                });
            })

            $("button:eq(2)").click(function () {
                // 滑入滑出切换（同样有四种用法）$("div").slideToggle(1000);
            })

        })
    </script>
</head>
<body>
<button> 滑入 </button>
<button> 滑出 </button>
<button> 切换 </button>
<div></div>

</body>
</html>

48-jQuery 动画详解

淡入淡出动画

1、淡入动画效果：

	$(selector).fadeIn(speed, callback);

作用：让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果：

	$(selector).fadeOut(1000);

作用：让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果：

	$(selector).fadeToggle('fast', callback);

作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同 show()方法。

代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            /*opacity: 1;*/
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            // 点击按钮后产生动画
            $("button:eq(0)").click(function () {//                // 淡入动画用法 1:   fadeIn();   不加参数
                $("div").fadeIn();

//                // 淡入动画用法 2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                // 通过控制  透明度和 display

                // 淡入动画用法 3:   fadeIn(字符串);   slow 慢：600ms   normal 正常:400ms   fast 快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                // 淡入动画用法 4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeIn(5000,function () {//                    alert(" 动画执行完毕！");
//                });
            })

            // 滑出动画
            $("button:eq(1)").click(function () {//                // 滑出动画用法 1:   fadeOut();   不加参数
//                $("div").fadeOut();

//                // 滑出动画用法 2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  // 通过这个方法实现的：display: none;
//                // 通过控制  透明度和 display

                // 滑出动画用法 3:   fadeOut(字符串);   slow 慢：600ms   normal 正常:400ms   fast 快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                // 滑出动画用法 1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeOut(2000,function () {//                    alert(" 动画执行完毕！");
//                });
            })

            $("button:eq(2)").click(function () {
                // 滑入滑出切换
                // 同样有四种用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                // 改透明度
                // 同样有四种用法
                $("div").fadeTo(1000, 0.5, function () {alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button> 淡入 </button>
<button> 淡出 </button>
<button> 切换 </button>
<button> 改透明度为 0.5</button>
<div></div>

</body>
</html>

自定义动画

	$(selector).animate({params}, speed, callback);

作用：执行一组 CSS 属性的自定义动画。

  • 第一个参数表示：要执行动画的 CSS 属性（必选）

  • 第二个参数表示：执行动画时长（可选）

  • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {$("button").click(function () {var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                // 自定义动画
                $("div").animate(json, 1000, function () {$("div").animate(json2, 1000, function () {alert(" 动画执行完毕！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button> 自定义动画 </button>
<div></div>
</body>
</html>

停止动画

	$(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

  • true：后续动画不执行。

  • false：后续动画会执行。

第二个参数：

  • true：立即执行完成当前动画。

  • false：立即停止当前动画。

PS：参数如果都不写，默认两个都是 false。实际工作中，直接写 stop()用的多。

效果演示：

当第二个参数为 true 时，效果如下：

48-jQuery 动画详解

当第二个参数为 false 时，效果如下：

48-jQuery 动画详解

这个 后续动画 我们要好好理解，来看个例子。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></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-color: pink;
        }

        .wrap li {background-color: green;}

        .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>
    <script src="jquery-1.11.1.js"></script>
    <script>
        // 入口函数
        $(document).ready(function () {
            // 需求：鼠标放入一级 li 中，让他里面的 ul 显示。移开隐藏。var jqli = $(".wrap>ul>li");

            // 绑定事件
            jqli.mouseenter(function () {$(this).children("ul").stop().slideDown(1000);
            });

            // 绑定事件(移开隐藏)
            jqli.mouseleave(function () {$(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);"> 一级菜单 1 </a>
            <ul>
                <li><a href="javascript:void(0);"> 二级菜单 1 </a></li>
                <li><a href="javascript:void(0);"> 二级菜单 2 </a></li>
                <li><a href="javascript:void(0);"> 二级菜单 3 </a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);"> 一级菜单 1 </a>
            <ul>
                <li><a href="javascript:void(0);"> 二级菜单 1 </a></li>
                <li><a href="javascript:void(0);"> 二级菜单 2 </a></li>
                <li><a href="javascript:void(0);"> 二级菜单 3 </a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);"> 一级菜单 1 </a>
            <ul>
                <li><a href="javascript:void(0);"> 二级菜单 1 </a></li>
                <li><a href="javascript:void(0);"> 二级菜单 2 </a></li>
                <li><a href="javascript:void(0);"> 二级菜单 3 </a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

效果如下：

48-jQuery 动画详解

上方代码中，关键的地方在于，用了 stop 函数，再执行动画前，先停掉之前的动画。

如果去掉 stop()函数，效果如下：（不是我们期望的效果）

48-jQuery 动画详解

stop 方法的总结

当调用 stop()方法后，队列里面的下一个动画将会立即开始。
但是，如果参数 clearQueue 被设置为 true，那么队列面剩余的动画就被删除了，并且永远也不会执行。

如果参数 jumpToEnd 被设置为 true，那么当前动画会停止，但是参与动画的每一个 CSS 属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。

注意：如果元素动画还没有执行完，此时调用 stop()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。

举例：右下角的弹出广告

代码实现：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(images/ad.jpg);
            display: none;
        }

        .ad span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(images/h.jpg);
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            // 需求：然广告 ad 部分，先滑入，在滑出，在淡入。然后绑定事件，点击 span 弹出
            // 步骤：$(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {$(this).parent().fadeOut(1000);
            });


            // 第二种写法
//            $(".ad").slideDown(1000, function () {//                $(".ad").slideUp(1000, function () {//                    $(".ad").fadeIn(1000, function () {//                        $(".ad").children("span").click(function () {//                            $(this).parent().fadeOut(1000, function () {//                                alert(" 执行完毕！");
//                            });
//                        });
//                    });
//                });
//            })
        })
    </script>
</head>

<body>

<div class="ani"> 我是内容 </div>
<div class="ad">
    <span></span>
</div>

</body>
</html>

效果如下：

48-jQuery 动画详解

    正文完
    JavaScript基础 jQuery
    发表至： 开发笔记
    2024-09-10
     0
    Yojack
    版权声明：本篇文章由 Yojack 于2024-09-10发表，共计6895字。
    转载说明：
    1 本网站名称：优杰开发笔记
    2 本站永久网址：https://yojack.cn
    3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
    4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
    7 站长邮箱：laylwenl@gmail.com
    HTML5是**构建和呈现互联网内容**的新一代语言标准，它被认为是**互联网核心技术之一**
    用customize-cra react-app-rewired配置less css module
    vue父组件值变化，子组件不刷新的问题（三种方案）
    C++编译：工具链的功能和用法
    评论（没有评论）
    搜一搜,打开新世界
    热门文章
    WordPress3 和 jQuery（二）

    WordPress3 和 jQuery（二）

    原文：zh.annas-archive.org/md5/5EB3887BDFDDB364C2173BCD8CE...
    CSS3新增属性(15个案例 代码 效果图 素材)

    CSS3新增属性(15个案例 代码 效果图 素材)

    目录 1.rgba(透明度) 案例: 为图片添加蓝色的滤镜 1. 代码 2. 效果  2.opacity 属性...
    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

    🔥博客主页：【 小扳_-CSDN 博客】❤感谢大家点赞👍收藏⭐评论✍ 文章目录         1.0 Rab...
    一文彻底搞定MySQL中的JSON类型，效率飞起。

    一文彻底搞定MySQL中的JSON类型，效率飞起。

    写在开头 JSON 类型通常用于存储非结构化的数据或者一些可变的数据，比如存储日志、配置信息等。我们有时候需要...
    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

    文章目录 一、fastjson 1.2.24 远程命令执行漏洞复现 二、shiro 反序列化漏洞(CVE-20...
    一言
    -「」
    标签云
    ​ 图片懒加载.netcore1024程序员节1024程序员节 | 征文2021，目标20222023春节祝福3d3D呈现效果3D导航栏5G SoC7-ZipaardioadbAIaigcAirPods Maxai作画AI工具AI手机AI生成AI编程ajaxandroidandroid-studioangular.jsAngularJSanimationant-design-vueantdanti-design-vueapacheapiAPICloudapp登录页面arcgisarduinoasp.netattachmentawsaxiosa标签babelbackground背景精灵beautifulsoupbootstrapbreakbugc:Progran Filesnodejspnpm.pslc#c5全栈canvanscanvascanva可画cesium渐变材质chatgptchm手册Chromecjsoncnpmcocos2dcodemirrorcondacookie交互crosCrypto，web Crypto，Crypto加密CSScss 弹性布局CSS 选择器css，css点赞，css直播css，flex布局，reactnative布局css，Nestingcss，圆角三角形，三角形css，外描边，阴影，文字渐变CSS3CSS3DSpritecss3沿椭圆轨道旋转CSS优化css动画css基础css学习css居中对齐css属性css文字描边css新特性css盒模型CSS相对定位CSS继承性css视差滚动css视频CSS设置虚线css超出部分显示省略号css选择器curlc语言daemondata urldataVDcokerdecodeURIComponent