乐趣区

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

jiezi

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

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

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

我之前也和小伙伴们讲过应用 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");

默认形式下实现成果如图：

二、滑动形式显示和暗藏

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

滑动形式下显示

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

实例代码：


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

滑动形式下暗藏

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

实例代码：

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

滑动形式下既显示又暗藏：

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

实例代码：


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

滑动形式下实现成果如图：

三、淡入淡出形式显示和暗藏

淡入淡出形式下进行元素的显示和暗藏其实和下面两种办法一样的，不同的也只是显示的成果不一样罢了，

淡入淡出形式下显示应用的办法是：

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

实现代码：

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

淡入淡出形式下实现暗藏

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

实现代码：

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

淡入淡出形式下既显示又暗藏

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

实现代码：

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

淡入淡出形式下运行的成果如下：

以上就是利用 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>

成果如下：

点击关注，第一工夫理解华为云陈腐技术~

退出移动版