- linux开机自启动服务命令（运行自启动脚本命令）
- linux忘记密码进不去如何解决（centos忘记登录密码解决方案）
- css梯形圆角边框样式（css实现多边形图案）
- 超详细css样式代码大全（css常用代码整理版）
- mysql和oracle的语法区别有什么（oracle为什么比mysql快）
- python调试程序的方法（python调试运行语句）
- php和java哪个好用（2022年学php还是java好）
- mysql除法保留小数（mysql保留几位小数的4种方法）
- 3种js对象转数组的方法（js将对象转换成数组的简单方法）
- mysql如何创建数据库教程（建立数据库的步骤）
- linux修改文件名称命令（linux重命名文件名后缀）
- mysql函数有哪些及作用（常用的数据库函数总结）
- python中class类的定义及用法（深入解析py的class类）
- python文件重命名代码命令（python如何批量修改文件名）
- linux查看配置信息文件命令（linux如何查看主机配置）
- win10命令提示符怎么进入系统模式（管理员怎么运行命令提示符）
- php和python性能对比哪个更好（php网页编程可以做什么）
- cmd进入mysql命令行连接（windows进入数据库的方法）
- xshell连接linux服务器教程分享（xshell常用命令大全值得收藏）
- css三角形怎么写（实例演示css创建三角形实现代码）
- linux查看磁盘信息命令（如何查看磁盘使用情况）
- excel下拉框怎么编辑（如何编辑下拉框选项内容）
- excel基础操作知识总结（必备的excel知识点总结大全）
- excel快速选择区域的方法（超实用表格快速选中某个区域方法）
- excel常用快捷键命令大全表（239个最常用excel快捷键技巧）
- excel中常用的数据格式有哪些（基本数据类型你了解多少）
- excel打乱顺序排列方法（表格随机打乱顺序）
- 最简单的excel表格分列拆分快捷方式（表格拆分列和行方法）
- excel日期差值计算公式（跨天的时间差计算公式）
- 一分钟搞定excel下拉列表关联设置（表格下拉菜单自动关联操作方法）
- excel日期比较函数正确公式（如何用excel计算日期差）
- excel颠倒顺序怎么做（excel数据如何实现顺序反转）
- html定位的几种方式分别是什么（简述HTML的定位方式怎么用）
- jquery获取属性值方法详解（jquery获取元素的实现方法）
- jquery隐藏元素的方法（jquery实现元素显示和隐藏的方式）
- linux查看隐藏文件命令是什么（如何查看隐藏文件命令）
- css居中对齐的代码怎么设置（css网页居中对齐代码怎么写）
- Java中rpc框架有哪些功能介绍（常用rpc框架有哪些）
- 修改linux系统时间常见命令（centos修改系统时间脚本命令）
- ajax同步和异步的区别是什么（简述编程中同步和异步的区别）
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>效果如下：