教你三种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) ...
随机推荐
- hdu5025 状态压缩广搜
题意: 悟空要救唐僧,中途有最多就把钥匙,和最多五条蛇,要求就得唐僧并且拿到所有种类的钥匙(两个1只拿一个就行),拿钥匙i之前必须拿到钥匙i-1,打蛇多花费一秒,问救出唐僧并且拿到所有种类 ...
- Django中的表单
目录 表单 Django中的表单 用表单验证数据 自定义验证 表单 HTML中的表单是用来提交数据给服务器的,不管后台服务器用的是 Django 还是 PHP还是JSP还是其他语言.只要把 inpu ...
- node-redis基本操作
//npm install redis var redis = require("redis"), client = redis.createClient(); client.se ...
- CTFHub-技能树-Bypass disable_function：LD_PRELOAD
LD_PRELOAD 目录 LD_PRELOAD 题目描述 解题过程 简单测试 查看phpinfo 编译动态链接库 写调用代码 题目描述 目标:获取服务器上/flag文件中的 flag.需要了解 Li ...
- redux和mobx入门使用
redux和mobx入门使用 项目涉及技术 公共插件 create-react-app react-dom react-router react-router-dom react-hook redux ...
- 【js】Leetcode每日一题-数组异或操作
[js]Leetcode每日一题-数组异或操作 [题目描述] 给你两个整数,n 和 start . 数组 nums 定义为:nums[i] = start + 2*i(下标从 0 开始)且 n == ...
- Linux yum 报错：One of the configured repositories failed (Unknown), and yum doesn't have.
1. 请先确定你是无法联网还是配置问题. ping www.baidu.com 如果是正常ping那可以看这个帖子完成配置 https://blog.csdn.net/weicuidi/articl ...
- spring boot 与 Mybatis整合(*)
在pom.xml文件中加入数据库.spring-mybatis整合 <!-- spring boot 整合mybatis --> <dependency> <groupI ...
- [Java] 开课吧--JVM
双亲委派 向上委托,向下加载 收到加载任务后,先交给父类加载器,只有当父类加载器无法完成,才会执行加载 保证只有一个类加载器加载,避免重复加载 破坏:JDK 1.2后才使用,JDK 1.1的核心类没 ...
- gcc 版本
$ gcc --versiongcc (Ubuntu 5.4.0-6kord1~16.04.4k2) 5.4.0 20160609Copyright (C) 2015 Free Software Fo ...