在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的。下面主要介绍jquery各个元素隐藏方法之间的区别。

1、show()和hide()

使用hide()方法隐藏元素实际上是同时减少元素的高度、宽度以及不透明度,直到这三个属性为0,最后设置元素的css属性disolay:none。show()方法从上到下增大元素的高度,从左到右增大元素的宽度,同时增加内容的不透明度,直至元素完全显示。

2、fadeIn()和fadeOut()

这两种方法使元素隐藏或显示的时候只改变元素的不透明度。

3、slideUp()和slideDown()

这两种方法使元素隐藏或显示的时候只改变元素的高度。slideDown()显示的时候是从上到下,slideUp()隐藏时是从下到上。

上述三种方法里面都可以传递两个参数,第一个参数是元素显示或隐藏的过度效果,可以传递具体的时间值,也可以传递各个方法规定好的显示隐藏方式值,第二个是回调函数,在元素显示或隐藏后要执行的其他操作。

除了以上介绍的方法外,jquery的animate()方法也可以使元素隐藏,它的原理是使用css的属性。该方法可以接受三个参数,第一个是css属性,第二个是过度效果,第三个是回调函数。

jquery中使元素显示和隐藏方法之间的区别的更多相关文章

  1. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  2. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  3. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  4. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  5. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. jQuery如何判断元素是否是隐藏的?

    jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...

  7. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  8. unity3d中让物体显示和隐藏

    unity3d中让物体显示和隐藏的方法 gameObject.renderer.enabled //是控制一个物体是否在屏幕上渲染或显示  而物体实际还是存在的 仅仅是想当于隐身 而物体本身的碰撞体还 ...

  9. jquery中获取iframe的id的方法:

    jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...

随机推荐

  1. ActiveReports 大数据分析报告:贸易争端与中国企业数字化转型

    2018年11月12日至18日,亚太经合组织(APEC)领导人非正式会议首次在南太平洋最大岛国巴布亚新几内亚的首都莫尔兹比港举行,本次会议的主题是:“把握包容性机遇,拥抱数字化未来”. 面对全球不断变 ...

  2. JavaScript闭包函数&箭头函数调用与执行

    一.标准的闭包函数 //一.标准的闭包函数 function A() { var i=0; ++i; console.log('i : ' + i); return function b() { re ...

  3. Flex外包公司——案例汇总

    Flex做的案例汇总: http://flex.org/showcase/ http://taggraph.com/everybody http://demoprod.informationbuild ...

  4. 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]

    全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. js 简版双色球 取号

    <style type="text/css"> span{ display: block; float: left; width: 50px; height: 50px ...

  6. 第 8 章 容器网络 - 065 - 容器在 Weave 中如何通信和隔离?

    首先在host2 执行如下命令: weave launch 10.12.31.22 这里必须指定 host1 的 IP 10.12.31.22,这样 host1 和 host2 才能加入到同一个 we ...

  7. Redis入门指南之一(简介)

    1. 简介 Redis是一个开源的.高性能的.基于键值对的缓存与存储系统,通过提供多种键值数据类型来适应不同的场景下的缓存与存储需求.同时Redis的诸多高级功能使其可以胜任消息队列.任务队列等不同的 ...

  8. Python — 字典dict 和 集合set

    字典dict : dict和set的key都是不可变对象 对于不变对象来说,调用对象自身的任意方法,也不会改变对象自身的内容.相反,这些方法会创建新的对象并返回,这样,就保证了不可变对象本身永远是不可 ...

  9. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  10. 连接SQLsever数据库在C#中不能操作的问题

    最近小组成员在用C#连接数据库进行操作的时候,总是注册不起用户,提示为sql.client值不能为NULL,经过了一上午的百度查询,讨论,总是找不到问题所在,不得已去问了老师,老师是专业的软件工程师, ...