教你三种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) ...
随机推荐
- CVE-2012-1876：Internet Exporter MSHTML.DLL CaculateMinMax 堆溢出简单分析
0x01 2012 Pwn2Own 黑客大赛 Pwn2Own 是世界上最著名的黑客大赛,意在激励白帽黑客们进行顶尖的安全研究.在 2012 年 Pwn2Own 大赛上,来自法国著名的安全团队 Vupe ...
- <input type="file" id="fileID">文本框里的值清空方法
一般情况下,不允许通过脚本来对文件上传框赋值. 下面是一个变通的方法.就是创建一个新的input type="file" 把原来的替换掉. <!DOCTYPE html PU ...
- 《前端运维》一、Linux基础--基础命令（1）
在开始之前,你需要做一些准备工作,去阿里买一台服务器,服务器的具体细节其实并不是十分重要,我也不会在这里一步一步的教大家如何去买一个服务器.百度一下足够了,但是还是要贴一下这篇文章中,我所使用的服务器 ...
- 【python】Leetcode每日一题-寻找旋转排序数组中的最小元素
[python]Leetcode每日一题-寻找旋转排序数组中的最小元素 [题目描述] 已知一个长度为 n 的数组,预先按照升序排列,经由 1 到 n 次 旋转 后,得到输入数组.例如,原数组nums ...
- IDEA只有Commit没有Push按钮
问题描述 idea的右上角只有commit按钮,而没有push按钮 问题解决 打开File->Settings->Menus and Toolbars->Navigation Bar ...
- CentOS运行多个Tomcat操作步骤
一:修改环境变量 在/et/profile文件追加以下内容 # tomcat1 env ( 第一个tomcat 的环境变量) export CATALINA_HOME=/usr/local/apach ...
- SpringBoot端口和上下文路径
可以通过修改application.properties,修改访问的端口号和上下文路径 spring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.view.suf ...
- Android学习之TTS踩坑笔记
•前言 最近在做一款英文词典的 APP,做到语音模块的时候,我裂开,从网上搜索了各种博客,各种瞎捣鼓,模拟器就是不发音: 辗转反侧数日,终于让我找到解决之法,接下来就本次测试列出一些需要(必须)解决的 ...
- Sping AOP
Sping AOP 1.什么是AOP 面向切面编程(AOP) 是 面向对象编程的补充(OOP) 传统的业务处理代码中,通常会惊醒事务处理.日志处理等操作.虽然可以使用OOP的组合或继承来实现代码重用, ...
- activiti知识点梳理
一.Activiti是什么 Alfresco 软件在 2010 年 5 月17 日宣布 Activiti业务流程管理(BPM)开源项目的正式启动,其首席架构师由业务流程管理 BPM的专家 Tom Ba ...