浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别


Posted in Javascript onAugust 18, 2016

hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样?

很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数:

$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);

首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已。但是当我们把参数 speed 设置稍微长一些就可以看出区别了。并且实现的效果显示起来都差不多,所以被误以为是一样的,其实不然。

让我们写下如下代码:

<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button.dl").click(function(){
  $("#div1").fadeOut(3000);
 });
});
$(document).ready(function(){
 $("button.dll").click(function(){
  $("#div2").hide(3000);
 });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button class="dl">点击这里,使红色矩形1淡出(fadeOut)</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br><br>
<button class="dll">点击这里,使红色矩形2隐藏(hide)</button>
<br><br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>

好了 现在我们可以测试下了,怎么样区别一目了然吧。

没错,hide隐藏的效果是从下至上或从右下到左上的慢慢折叠缩小,而fadeOut的淡出效果是整体淡化直至消失。好了 现在我们可以测试下了,怎么样区别一目了然吧。

同理 show和fadeIn也是这样的区别,大家自己改下代码试下吧。

以上这篇浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 #Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 #Javascript
AngularJS 工作原理详解
Aug 18 #Javascript
js H5 canvas投篮小游戏
Aug 18 #Javascript
jQuery过滤选择器经典应用
Aug 18 #Javascript
jQuery表单事件实例代码分享
Aug 18 #Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 #Javascript
You might like
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
javascript每日必学之多态
2016/02/23 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
微信小程序wepy框架笔记小结
2018/08/08 Javascript
详解 Python 读写XML文件的实例
2017/08/02 Python
python模拟事件触发机制详解
2018/01/19 Python
python PyTorch预训练示例
2018/02/11 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Django异步任务线程池实现原理
2019/12/17 Python
python中wheel的用法整理
2020/06/15 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
留学自荐信写作方法
2014/01/27 职场文书
母婴店促销方案
2014/03/05 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
学生评语大全
2014/04/18 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
会计稽核岗位职责
2015/04/13 职场文书
女性励志书籍推荐
2019/08/19 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
MySQL 全文检索的使用示例
2021/06/07 MySQL