教你三种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")
淡入淡出方式下运行的效果如下：
以上就是利用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中使元素显示和隐藏方法之间的区别
在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- CAD转DXF怎么转换?教你三种转换方法
CAD图纸在我们日常生活中都是可见到的,因为CAD图纸文件的格式是多样的,在工作中就需要经常将CAD的格式进行转换.那CAD转DXF怎么转换呢?这个问题很多的小伙伴们都遇到过,下面小编就来教大家三种转 ...
- jQuery如何判断元素是否是隐藏的？
jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
- jquery判断对象是否显示或隐藏
if($('a.specail2').is(":visible")){ /**jquery判断对象是否显示或隐藏**/ $('a.one').hide(); $('a.specai ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- 官网安装Python包太慢？教你三种下载安装方式-PiP、conda、轮子，教你三种Pytorch的下载安装方式，保证你再也不用出现Error
上一期我们介绍了CUDA下载安装以及其总结,这一期教大家如何在Anaconda中使用CUDA来进行加速.神经网络依赖cuDNN的下载安装,以及下载和安装Pytorch-GPU安装包的三种方式(cond ...
- CSS的三种基本框架
CSS的三类选择器 1.css-css的基本选择器(三种) 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2) ...
随机推荐
- Linux提权之利用 /etc/passwd 文件
当我们获得了某个Linux服务器的低权限之后,我们想要对该低权限账号进行提权,以执行更多的操作. 接下来我们的提权是利用 /etc/passwd 文件的可写入权限,导致我们写入一个其他用户进去. 首先 ...
- React-条件渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- postman使用教程7-参数化引用外部文件测试数据
前言 当同一个接口需要测试不同的参数时,需用到参数化的概念.postman支持从外部文件读取测试数据参数化 设置参数化变量 新建一个collections 专门测试登录接口 设置集合变量usernam ...
- androidstudio2.0引用.so文件
1.将.so文件复制到libs目录下: 2.在build.gradle中添加下面的代码 sourceSets.main.jniLibs.srcDirs = ['libs'] 结果示例: (上面的1.2 ...
- @ResponseBody、@RequestBody
@ResponseBody 我们在刚刚接触Springboot的第一个hello工程的时候,我们就接触了一个RestController,而通过进入它的源码,我们会发现@ResponseBody @R ...
- 测开之Python自动化全栈工程师+性能专项（送思维导图）
测开之Python自动化全栈工程师+性能专项 功能测试基础 接口测试基础接口的通信原理与本质cookie.session.token详解接口测试的意义与测试方法接口测试用例的设计 app测试 app流 ...
- 『政善治』Postman工具 — 8、Postman中Pre-request Script的使用
目录 1.Pre-request Script介绍 2.常用SNIPPETS(片段)说明 (1)获取变量脚本: (2)设置变量脚本: (3)清空变量脚本: (4)Send a request代码片段 ...
- 面向对象编程OOP
这节讲一下,什么是面向对象(Object Oriented Programming).说面向对象之前,我们不得不提的是面向过程(Process Oriented Programming),C语言就是面 ...
- Asp.NetCore 自定义中间件
这节演示一下自定义中间件,第一节我们讲到,中间件的处理流程就像一个俄罗斯套娃,那这种俄罗斯套娃型的流程内部是如何实现的呢,下面请看代码. 第一种写法是直接写在Configure方法中的,使用app ...
- SQLFlow使用中的注意事项--设置篇
SQLFlow 是用于追溯数据血缘关系的工具,它自诞生以来以帮助成千上万的工程师即用户解决了困扰许久的数据血缘梳理工作. 数据库中视图(View)的数据来自表(Table)或其他视图,视图中字段(Co ...