使元素隐藏的所有方式汇总
- 1、display:none
- 2、visibility:hidden
- 3、opacity:0
- 4、overflow:hidden
- 5、定位
- 6、2D变换
- transfrom:scaleY(0)
- translate(x,y )平移
- skew(Xdeg,Ydeg) 倾斜
- 7、设置元素高为0
- 8、jQ
- hide(time,function)
- fadeout(time,function)
- slideup(time,function)
1、display:none
css属性设置display,且不占位
2、visibility:hidden
css属性,隐藏,且占位
3、opacity:0
css属性,设置透明度为0
4、overflow:hidden
css属性,超出部分隐藏,需要设置显示的盒子比需要隐藏的小。比如一个盒子
是30*30,里面的内容是50*50,给盒子设置overflow:hidden 就是内容只显
示30*30。
5、定位
设置position:relative 相对定位,设置z-index:-1000
或者直接定位到超级远的地方
6、2D变换
transfrom:scaleY(0)
缩放到0倍(看不见)
translate(x,y )平移
x和y设置很大的值,使其平移出屏幕外。
也可以拆分成translateX(),translateY(),单位是px
skew(Xdeg,Ydeg) 倾斜
同上也可拆分X,Y,合在一起写的话,X,Y是数值类型,deg是角度单位,必须写
比如说沿X轴旋转。就是你拿张纸,面朝你旋转90°。就是变成一条线了,等同于消
失
7、设置元素高为0
height:0
8、jQ
hide(time,function)
普通隐藏显示
time为时间
function为执行完毕调用的函数
fadeout(time,function)
透明度隐藏
time为时间
function为执行完毕调用的函数
slideup(time,function)
向上卷起隐藏
time为时间
function为执行完毕调用的函数
本文地址:https://blog.csdn.net/Lazy33/article/details/107164145
黄山市民网:https://www.huangshanshimin.com/