教你三种jQuery框架实现元素显示及隐藏动画方式

Posted 华为云

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了教你三种jQuery框架实现元素显示及隐藏动画方式相关的知识，希望对你有一定的参考价值。

摘要：在jQuery框架中对元素对象进行显示和隐藏有三种方式，分别是“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”。

本文分享自华为云社区《jQuery框架实现元素显示及隐藏动画【附案例分析】》，原文作者：灰小猿。

首先来看一个简单的动画效果图：

https://image.cha138.com/20210627/db71bf8a32f64affb915ede228aea4c6.jpg​

我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作，所以上面显示和隐藏的也只是一个div，而并不是一个图片。下面我就来和小伙伴们讲一个如何对元素的属性进行操作，使其显示或者隐藏！

在jQuery框架中对元素对象进行显示和隐藏有三种方式，分别是“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”。接下来我们就分别对这三种方法进行介绍。

一、默认方式显示和隐藏

在默认方法下显示元素的方法是

show([speed,[easing],[fn]])

其中的参数含义为：

  • speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
  • easing：用来指定切换效果，默认是"swing"，可用参数"linear"。* swing：动画执行时效果是 先慢，中间快，最后又慢。* linear：动画执行时速度是匀速的
  • fn：在动画完成时执行的函数，每个元素执行一次。

同时在这里提醒一点就是，以上的三个参数是可有可无的，如果不对其进行设置，那么将以默认值执行。

如下实例代码：

 // 显示div
 $("#showDiv").show("slow","swing");
 linear 匀速

在默认方式下实现元素隐藏的方法是

hide([speed,[easing],[fn]])

其中的参数含义和show方法中的一样。同样也是三个参数是可有可无的，如果不对其进行设置，那么将以默认值执行。在这里我们增加一个最后的执行函数，让其弹出一个窗口“隐藏了...”。

如下实例代码：

// 隐藏div
$("#showDiv").hide("slow","swing",function () {
    alert("隐藏了...")
});

那么难道我们每次都要定义一个方法用于元素显示，再定义一个方法用于元素隐藏吗？并不是的，jQuery中也充分的考虑到了这一点，所以在有一个既能实现显示又能实现隐藏的方法

toggle([speed],[easing],[fn])

当调用该方法的时候，元素就会被隐藏掉，类似于hide()方法，当再次调用时，元素又会被显示出来，类似于show()方法。其中的参数含义和上面一样

实例代码如下：

// 能显示能隐藏
 $("#showDiv").toggle("slow","linear");

默认方式下实现效果如图：

https://image.cha138.com/20210627/42bc3712af2347c0a9b8e4781cc8eea9.jpg​

二、滑动方式显示和隐藏

从名字上我们应该也能区分出，滑动方式和默认方式的不同之处其实就是显示和隐藏时的动画不一样罢了，下面我们就来介绍一下在滑动方式下进行元素的显示、隐藏、既显示又隐藏，

滑动方式下显示

slideDown([speed],[easing],[fn])

实例代码：

// 滑动显示div
$("#showDiv").slideDown("slow");

滑动方式下隐藏

slideUp([speed,[easing],[fn]])

实例代码：

// 滑动隐藏div
$("#showDiv").slideUp("fetch");

滑动方式下既显示又隐藏：

slideToggle([speed],[easing],[fn])

实例代码：

// 滑动能显示能隐藏
$("#showDiv").slideToggle("slow");

滑动方式下实现效果如图：

https://image.cha138.com/20210627/48643f7537a34e68927117ecd56a3b42.jpg​

三、淡入淡出方式显示和隐藏

淡入淡出方式下进行元素的显示和隐藏其实和上面两种方法一样的，不同的也只是显示的效果不一样罢了，

淡入淡出方式下显示使用的方法是：

fadeIn([speed],[easing],[fn])

实现代码：

// 淡出显示div
$("#showDiv").fadeIn("slow")

淡入淡出方式下实现隐藏

fadeOut([speed],[easing],[fn])

实现代码：

// 淡出隐藏div
$("#showDiv").fadeOut("fetch");

淡入淡出方式下既显示又隐藏

fadeToggle([speed,[easing],[fn]])

实现代码：

// 淡入淡出显示和隐藏div
$("#showDiv").fadeToggle("fetch")

淡入淡出方式下运行的效果如下：

https://image.cha138.com/20210627/08da2bb9b12d44788a79fe9764e88186.jpg​

以上就是利用jQuery框架对元素进行显示和隐藏的方法，下面是上面实例的完整实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>默认方式显示和隐藏动画</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
    <script>
        function hideFn() {
            // 隐藏div
            /*$("#showDiv").hide("slow","swing",function () {
                alert("隐藏了...")
            });*/

            // 滑动隐藏div
            $("#showDiv").slideUp("fetch");

            // 淡出隐藏div
            // $("#showDiv").fadeOut("fetch");

        }
        
        function showFn() {
            // 显示div
            // $("#showDiv").show("slow","swing");
            // linear 匀速

            // 滑动显示div
            // $("#showDiv").slideDown("slow");

            // 淡出显示div
            $("#showDiv").fadeIn("slow")
        }
        
        function toggleFn() {
            // 能显示能隐藏
            // $("#showDiv").toggle("slow","linear");

            // 滑动能显示能隐藏
            // $("#showDiv").slideToggle("slow");

            // 淡入淡出显示和隐藏div
            $("#showDiv").fadeToggle("fetch")
        }
        
    </script>
    
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

四、案例：广告的自动显示和隐藏

既然现在我们已经知道了jQuery框架下是如何进行元素的显示和隐藏的，那么就应该将其应用到实际的案例中去，下面通过实现广告的自动显示和隐藏的案例，来对该技术进一步加强实践。

我们要实现的是，在一个简单的网页中，页面打开三秒后将广告图显示出来，显示五秒后再将广告隐藏，这里对广告图片显示和隐藏的操作，根据上面的讲解，现在实现图片的显示和隐藏应该是很容易的了，那么到底应该如何实现延时显示和隐藏呢？

这里就要用到js中的一个定时器setTimeout(方法,时间);

该方法的第一个参数是一个方法名，如显示或隐藏图片的方法，第二个参数是毫秒数，表示页面加载完成后多少秒执行该方法。

那么根据思路，我们就可以在jQuery的入口函数中写入，页面加载完成3000毫秒，也就是三秒后调用显示图片的方法；页面加载完成8000毫秒，也就是八秒后调用隐藏图片的方法，中间空余的五秒为显示图片的时间。

下面我们来讲上述需求实现，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        // 图片延时显示和隐藏的步骤
        // 1、在页面加载完成之后调用定时器setTimeout()方法
        // 2、在定时器中调用显示广告和隐藏广告的函数
        // 3、使用show和hide方法实现图片的显示和隐藏

        // 设置入口函数
        $(function () {
            // 延时3秒后显示图片
            setTimeout(adShow,3000);
            // 延时6秒后隐藏图片
            setTimeout(adHide,8000);
        });
        // 显示图片
        function adShow() {
            $("#ad").show("slow");
        }

        // 隐藏图片
        function adHide() {
            $("#ad").hide("fast");
        }

    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

效果如下：

https://image.cha138.com/20210627/515d75648d154ea6bb45f4469dafe96a.jpg

 

点击关注，第一时间了解华为云新鲜技术~

以上是关于教你三种jQuery框架实现元素显示及隐藏动画方式的主要内容，如果未能解决你的问题，请参考以下文章

jQuery框架实现元素显示及隐藏动画附案例分析

还不会使用分布式锁？教你三种分布式锁实现的方式

JQuery动画

jQuery元素的显示隐藏及动画

JQuery高级

jQuery动画和遍历