在实际的项目开发中,要使一个元素隐藏的方法有很多,比如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. 解决 Command "python setup.py egg_info" failed with error code 1 问题

    参考: "pip install unroll": "python setup.py egg_info" failed with error code 1 解决 ...

  2. linux安装nord,卸载nord源

    需要提前准备好:能使用的sock代理. 1.在这里 https://nordvpn.com/zh/download/linux/ 下载初始安装包,这包不是真正的软件,而是会给你添加一个源,大概为了安全 ...

  3. variable 'o' used without having been completely initialized Compiling Vertex program

    variable 'o' used without having been completely initialized Compiling Vertex program   v2f vert (ap ...

  4. Java操作MongoDB:连接&增&删&改&查

    1.连接 ①方式一 MongoClientOptions.Builder builder = MongoClientOptions.builder(); //可以通过builder做各种详细配置 Mo ...

  5. springboot启动配置原理之二(运行run方法)

    public ConfigurableApplicationContext run(String... args) { StopWatch stopWatch = new StopWatch(); s ...

  6. 【文献07】基于MPC的WMR点镇定-极坐标系下和轨迹跟踪

    参考: Kuhne F , Lages W , Silva J D . Point stabilization of mobile robots with nonlinear model predic ...

  7. servlet_filter简介

    Filter总结: 1.Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静 ...

  8. mongoose手动生成ObjectId

    用mongoose驱动保存数据,如果_id没有定义,那么在save的时候,mongoose驱动会自己生成一个_id.那么如果需要手动生成可以用mongoose.Types.ObjectId()方法. ...

  9. Runtime-消息发送和消息转发

    消息发送 消息发送举例:下面这个OC代码 [person read:book]; 会被编译成: objc_msgSend(person, @selector(read:), book); objc_m ...

  10. 如何正确使用QThread

    如何正确使用QThread https://www.2cto.com/kf/201609/550462.html