jquery中使元素显示和隐藏方法之间的区别

时间:2022-09-06 18:11:46

在实际的项目开发中,要使一个元素隐藏的方法有很多,比如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. 【实战Java高并发程序设计 1】Java中的指针:Unsafe类

    是<实战Java高并发程序设计>第4章的几点. 如果你对技术有着不折不挠的追求,应该还会特别在意incrementAndGet() 方法中compareAndSet()的实现.现在,就让我 ...

  2. python学习------dictionary和set

    一.dictionary 1.字典的形式:a={‘key’:value,‘key1’:value,................} 2.字典的的key不能重复,是一个不可变对象 3.字典的的查找和添 ...

  3. ios 设置状态栏文本颜色为白色

    1,在.plist文件中添加一个键值对:设置View controller-based status bar appearance的值为NO 2,在方法中 - (BOOL)application:(U ...

  4. Subversion how&lbrack;Reprint&rsqb;

    1.   Subversion简介 Subversion(简称SVN)是一款功能强大的开源版本控制工具,支持Linux和Windows平台. SVN可以有两个访问方式,一种是独立服务器直接访问,即利用 ...

  5. Spring jdbcTemplate &plus; EasyUI 物理分页

    前文说到,新项目中,用到的是SpringMVC + jdbcTemplate,前台是EasyUI,发现同事以前封装分页是逻辑分页,于是,自己动手封装了下物理分页. 这个是核心分页实体: import ...

  6. 2017年Web前端开发工程师薪资越来越高?

    放眼全球,不仅在国内的互联网行业,在国外,前端工程师一样是需求旺盛.供不应求的香饽饽.所以在供不应求的前端招聘市场上,优秀的前端工程师才是有话语权的那一方. 前端开发是做什么的? 前端是互联网时代软件 ...

  7. java中自动装箱带来的性能问题

    之前没有特别注意自动封装所带来的性能问题,今天看了effective java,实验了一下,结果大吃一惊: 考虑下面这段代码: public static void main(String args[ ...

  8. 【Java编程思想笔记】注解--自定义注解

    文章参考自:https://www.cnblogs.com/xdp-gacl/p/3622275.html 学习网站:how2java.cn 一.自定义注解的创建过程 第一步:(元注解)   使用元注 ...

  9. 2&period;数据库的基本操作&lt&semi;针对于库层面的操作&gt&semi;

    1.查看已有数据库: MySQL [(none)]> show databases; +--------------------+ | Database | +----------------- ...

  10. 关于ueditor一些使用记录

    1.使用的引用配置顺序 <script src="utf8-net/ueditor.config.js"></script> <script src= ...