【大牛系列教学】jQuery框架实现元素显示及隐藏动画【附案例分析

最新推荐文章于 2023-05-24 13:16:04 发布

蛋黄酥呀

最新推荐文章于 2023-05-24 13:16:04 发布

阅读量262

点赞数

分类专栏：程序员文章标签：后端 java 面试

本文链接：https://blog.csdn.net/AUZKAY/article/details/119393069

版权

程序员专栏收录该内容

337 篇文章 3 订阅

订阅专栏

在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");
# 总结

在这里，由于面试中MySQL问的比较多，因此也就在此以MySQL为例为大家总结分享。但是你要学习的往往不止这一点，还有一些主流框架的使用，Spring源码的学习，Mybatis源码的学习等等都是需要掌握的，我也把这些知识点都整理起来了，有需要的朋友可以**[【转发+关注】后点击这里免费领取！](https://gitee.com/vip204888/java-p7)**

![面试真题](https://img-blog.csdnimg.cn/img_convert/23ceb5f8d8d05ba5d8f81d4b89976d3f.png)


    }

        

        function toggleFn() {

            // 能显示能隐藏

            // $("#showDiv").toggle("slow","linear");
# 总结

在这里，由于面试中MySQL问的比较多，因此也就在此以MySQL为例为大家总结分享。但是你要学习的往往不止这一点，还有一些主流框架的使用，Spring源码的学习，Mybatis源码的学习等等都是需要掌握的，我也把这些知识点都整理起来了，有需要的朋友可以**[【转发+关注】后点击这里免费领取！](https://gitee.com/vip204888/java-p7)**

[外链图片转存中...(img-0H5mymOr-1628081654530)]


![Spring源码笔记](https://img-blog.csdnimg.cn/img_convert/85b25b0078d456e15f8c6a234c15f1a3.png)

蛋黄酥呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【大牛系列教学】jQuery框架实现元素显示及隐藏动画【附案例分析

在jQuery框架中对元素对象进行显示和隐藏有三种方式，分别是**“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”。**接下来我们就分别对这三种方法进行介绍。一、默认方式显示和隐藏===============在默认方法下显示元素的方法是show([speed,[easing],[fn]])其中的参数含义为：**speed：**动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)**easing：
复制链接

扫一扫

专栏目录