jquery显示隐藏动画 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")

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

​