浅谈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简单实现HTML标签Select联动带跳转
Oct 23 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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
Terran兵种对照表
2020/03/14 星际争霸
php读取纯真ip数据库使用示例
2014/01/26 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python struct模块解析
2014/06/12 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python感知机实现代码
2019/01/18 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python datetime处理时间小结
2020/04/16 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
管理建议书范文
2014/05/13 职场文书
2015年化验员工作总结
2015/04/10 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
总经理聘用协议书
2015/09/21 职场文书
求职自我评价参考范文
2019/05/16 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Python中tqdm的使用和例子
2022/09/23 Python