008，Jquery动画效果

最新推荐文章于 2024-08-27 15:59:21 发布

V哥学It

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量108

点赞数 2

分类专栏： Jquery小白入门到精通文章标签： jquery js javascript dom操作 javaweb

本文链接：https://blog.csdn.net/weixin_39032063/article/details/116406903

版权

Jquery小白入门到精通专栏收录该内容

15 篇文章 4 订阅

订阅专栏

Jquery动画效果

V哥官网：http://www.vgxit.com

本博客对应视频教程：http://www.vgxit.com/course/19

1，概述

jquery提供了三种方式来显示和隐藏元素：

1，默认显示和隐藏方式

2，滑动显示和隐藏方式

3，淡入淡出显示和隐藏方式

下面我们分别来学习者三种方式。

2，默认的显示隐藏方式

默认的显示和隐藏对应了三个方法：

1，show([speed, [easing], [fn]])：显示

2，hide([speed, [easing], [fn]])：隐藏

3，toggle([speed, [easing], [fn]])：切换显示和隐藏，也就是如果当前是显示的就隐藏，如果是隐藏的就显示

同学们可能看到了这三个方法，分别都有三个相同的参数，这三个相同的参数都是非必须的。下面我们分别对这三个参数做一下介绍：

1，speed：动画的速度，可以是字符串，分别是slow，normal和fast。分别代表缓慢，正常，快速。也可以用一个数字类型的数据来指定三种预定速度的毫秒值。

2，easing：用来指定切换的效果，默认是“swing”,也可以使"linear"。swing表示的是执行动画的时候先慢后快。linear表示指定动画的时候速度是匀速。

3，fn：表示动画完成之后的回调函数。

案例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>默认显示和隐藏的效果</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            function hideDiv() {
                var mydiv = $("#mydiv");
                mydiv.hide("slow", "linear", function () {
                    alert("隐藏div");
                });
            }
            function showDiv() {
                var mydiv = $("#mydiv");
                mydiv.show("slow", "swing", function () {
                    alert("显示div");
                });
            }
            function toggleFn() {
                var mydiv = $("#mydiv");
                mydiv.toggle(3000);
            }
        </script>
    </head>
    <body>
        <div style="width: 800px; height: 600px; background: yellow;" id="mydiv">测试div</div>
        <div style="margin-top: 10px;">
            <button onclick="hideDiv();">隐藏div</button>
            <button onclick="showDiv();">显示div</button>
            <button onclick="toggleFn()">显示或者隐藏div切换</button>
        </div>
    </body>
</html>

3，滑动显示和隐藏的方式：

1，slideDown([speed, [easing], [fn]])：显示

2，slideUp([speed, [easing], [fn]])：隐藏

3，slideToggle([speed, [easing], [fn]])：切换显示和隐藏，也就是如果当前是显示就隐藏，如果是隐藏就显示。

4，淡入淡出显示和隐藏的方式：

1，fadeIn([speed, [easing], [fn]])：显示

2，fadeOut([speed, [easing], [fn]])：隐藏

3，fadeToggle([speed, [easing], [fn]])：切换显示和隐藏，也就是如果当前是显示就隐藏，如果是隐藏就显示

V哥学It

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
008，Jquery动画效果

Jquery动画效果V哥教育QQ群：673215016官网：http://www.vgxit.com1，概述jquery提供了三种方式来显示和隐藏元素：1，默认显示和隐藏方式2，滑动显示和隐藏方式3，淡入淡出显示和隐藏方式下面我们分别来学习者三种方式。2，默认的显示隐藏方式默认的显示和隐藏对应了三个方法：1，show([speed, [easing], [fn]])：显示2，hide([speed, [easing], [fn]])：隐藏3，toggle(
复制链接

扫一扫