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>
效果如下：
以上就是jQuery框架实现元素显示及隐藏动画的三种方式的详细内容，更多关于jquery显示隐藏的资料请关注我们其它相关文章！
相关推荐
-
Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
-
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
本文实例讲述了jQuery 常用特效.分享给大家供大家参考,具体如下: 显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #content{display: none;} </
-
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式.dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能
-
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
本文实例讲述了jQuery动画显示和隐藏效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
-
jQuery框架实现元素显示及隐藏三种动画方式
目录 一.默认方式显示和隐藏 二.滑动方式显示和隐藏 三.淡入淡出方式显示和隐藏 四.案例:广告的自动显示和隐藏 本文分享自华为云社区<jQuery框架实现元素显示及隐藏动画[附案例分析]>,原文作者:灰小猿. 首先来看一个简单的动画效果图: 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作,所以上面显示和隐藏的也只是一个div,而并不是一个图片.下面我就来和小伙伴们讲一个如何对元素的属性进行操作,使其显示或者隐藏! 在jQuery框架中对元素对象进行显
-
Flutter控制组件显示和隐藏三种方式详解
目录 方式一:if语句控制 方式二:Offstage组件 方式三: Visibility Offstage和Visibility的区别: 方式一:if语句控制 // 例如: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if(a=="显示") Text("显示"), Offstage( offstage: false, child: Text("显示"), ),
-
AngularJS实现元素显示和隐藏的几个案例
案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu
-
jQuery实现菜单的显示和隐藏功能示例
本文实例讲述了jQuery实现菜单的显示和隐藏功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery显示菜单隐藏和显示</title> </head> <body> <script src="h
-
Selenium 三种等待方式(强制等待、隐式等待、显示等待)
1.强制等待(sleep) from time import sleep sleep(3) # 强制等待3秒 缺点:由于Web加载的速度取决于测试的硬件.网速.服务器的响应时间等因素.如果等待时间太长,容易造成时间浪费,如果等待时间太短又可能会造成在web还没有加载完所需要定位的element,而出现报错.由于等待时间无法确定,使用太多的sleep会影响运行速度,大大地降低效率,所以建议测试中尽量少使用强制等待. 2.隐式等待 ( implicitly_wait) # 隐式等待10s drive
-
解决EditText不显示光标的三种方法(总结)
解决方法有以下3种 1.在Edittext中加入以下属性 android:cursorVisible="true" android:textCursorDrawable="@null" 2.在Edittext中加入以下属性 android:cursorVisible="true" android:textCursorDrawable="@drawable/test_cursor" 对应的drawable文件 <?xml
-
Spring框架通过工厂创建Bean的三种方式实现
工厂模式 Spring中bean的创建,默认是框架利用反射new出来的bean实例.有时候也会有一些复杂的情况. 假设有一个飞机,属性如下,现在需要造很多同型号的飞机,那么唯一需要改变的属性只有DriverName(机长姓名),此时可以使用工厂模式帮我们创建对象,有一个专门帮我们创建对象的类帮我们创建对象,这个类就叫工厂. public class AirPlane { private String DriverName;// 机长姓名 private String AirPlaneName;/
-
python读取并显示图片的三种方法（opencv、matplotlib、PIL库）
前言 在进行图像处理时,经常会用到读取图片并显示出来这样的操作,所以本文总结了python中读取并显示图片的3种方式,分别基于opencv.matplotlib.PIL库实现,并给出了示例代码,介绍如下. OpenCV OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux.Windows.Android和Mac OS操作系统上. 它轻量级而且高效--由一系列 C 函数和少量 C++ 类构成,同时提供了Python.Ruby.MATLAB等语言的接口
-
详细解读分布式锁原理及三种实现方式
目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们"任何一个分布式系统都无法同时满足一致性(Consistency).可用性(Availability)和分区容错性(Partition tolerance),最多只能同时满足两项."所以,很多系统在设计之初就要对这三者做出取舍.在互联网领域的绝大多数的场景中,都需要牺牲强一致性来换取系统的高可用性,系统往往只需要保证"最终一致性",只要这个最终
-
Android 文件下载三种基本方式
一.自己封装URLConnection 连接请求类 public void downloadFile1() { try{ //下载路径,如果路径无效了,可换成你的下载路径 String url = "http://c.qijingonline.com/test.mkv"; String path = Environment.getExternalStorageDirectory().getAbsolutePath(); final long startTime = System.cur