CSS z-index与JQ fadeOut()缓动效果无效问题

问题代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{position: absolute;display: none;width: 500px;height: 500px;background-color: aqua;}.box span{position: absolute;display: block;width: 100px;height: 100px;background-color: gold;z-index: 5;}.box1{position: absolute;width: 500px;height: 500px;z-index: 3;background-color: red;}</style>
</head>
<body><div class="box"><span></span></div><div class="box1"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script>window.setTimeout(() => {$('.box').css('display','block')}, 1000);window.setTimeout(() => {$('.box').fadeOut(1000)}, 2000);</script>
</body>
</html>

原因：CSS z-index设置问题，box层级未设置，子元素span显示在box1上，使用fadeOut()时子元素跟随父元素层级隐藏下去，看到的就是该伪问题缓动效果无效

CSS z-index与JQ fadeOut()缓动效果无效问题相关推荐

网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...
javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果参数类型说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
JavaScript Tween算法及缓动效果
Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. 我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. ...
简单动画函数封装及缓动效果
function animate(obj, target) {clearInterval(obj.timer);//obj.timer = setInterval(function() {var ti ...
软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
运动曲线研究(缓动效果)
刚刚学习了一下网页动画中上的缓动效果,分享一下学习心得. 缓动曲线的概念: 缓动曲线是一个0为起点的连续函数曲线,x轴表示时间变化,y轴表示位移变化.曲线的斜率反映出运动的数度. 缓动效果在Flash ...
ui动效 unity_【FairyGUI Unity】使用动效功能实现血条UI扣血与加血的缓动效果
原理血条使用进度条组件,可以得到当前值与最大值. 通过动效-改变缩放可以让图片宽度从1到0按百分比变化. 动效可以指定播放动效的时间范围组件设计创建一个进度条组件,作为血条. bar是实际血量条 ...
css3-定时缓动效果与块旋转
先来了解一下两个css3的属性(当前学习到并理解的属性) 1.transform(变换) 语法: transform : none | <transform-function> [ < ...
〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果
当前子专栏基础入门三大核心篇是免费开放阶段.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加 ...

CSS z-index与JQ fadeOut()缓动效果无效问题

CSS z-index与JQ fadeOut()缓动效果无效问题相关推荐

最新文章

热门文章