Javascript 由动画DIV隐藏的跨距文本,不考虑z索引
我正在做我的一个爱好项目——它有点像是一个荣耀的RSS提要阅读器/抓取器。我已经能够让大多数东西工作,但由于某种原因,我无法在动画div上方绘制特定跨度内的文本 抓取进纸时,在显示结果之前会执行某些操作。在此期间,我跟踪进度并将其显示在动画“进度条”div中。所有子操作都有自己的进度条,并且它们都正常工作(进度条顶部的文本),但最终的进度条(总体进度)无法正确分层文本 我创建了一个例子来说明我的问题Javascript 由动画DIV隐藏的跨距文本,不考虑z索引,javascript,jquery,html,css,z-index,Javascript,Jquery,Html,Css,Z Index,我正在做我的一个爱好项目——它有点像是一个荣耀的RSS提要阅读器/抓取器。我已经能够让大多数东西工作,但由于某种原因,我无法在动画div上方绘制特定跨度内的文本 抓取进纸时,在显示结果之前会执行某些操作。在此期间,我跟踪进度并将其显示在动画“进度条”div中。所有子操作都有自己的进度条,并且它们都正常工作(进度条顶部的文本),但最终的进度条(总体进度)无法正确分层文本 我创建了一个例子来说明我的问题 $('#progress-total-box').bind('click', draw); f
$('#progress-total-box').bind('click', draw);
function draw() {
if (($('#progress-totalbar-fill').css('width')) == "0px") {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: '100%'}, 2000, function() {
var description = document.createElement('span');
$(description).attr('id', '#progress-total-text');
$(description).html('100%');
$('#progress-totalbar-empty').append(description);
$('#progress-total-box').bind('click', draw);
});
}
else {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: 0}, 2000, function() {
document.getElementById('progress-totalbar-empty').innerHTML = '';
$('#progress-total-box').bind('click', draw);
});
}
}
样式/位置/等纯粹是为了演示。在本例中,单击灰色加载条div时,它会将其宽度设置为0%到100%(反之亦然)。动画完成后,将创建一个新的子跨度,并将其附加到“空栏”背景div,其中显示总百分比(在本例中为100%)
重置杆时,有意移除此跨度元素
你们知道哪里出了问题吗?我该怎么解决
我在Chrome和Firefox中都遇到了这个错误
提前谢谢 这里有很多问题 首先,您需要从此行中删除
#
$(description).attr('id', 'progress-total-text');
新的跨度,从来没有得到它应该得到的css。
其次,您需要更改标记或css。
在本例中,我更新了CSS,但id名称不再有意义
body {
width: 100%;
height: 125px;
margin: 0;
}
#progress-category-box {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
background-color: red;
}
#progress-total-box {
position: relative;
width: 100%;
height: 40px;
top: 32.5%;
float: right;
text-align: center;
background-color: #515A5C;
}
#progress-totalbar-empty {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #97b0b1;
background-color: transparent;
z-index: 3;
}
#progress-totalbar-fill {
position: relative;
width: 0%;
height: 100%;
top: -42px;
border-left: 1px solid #97b0b1;
border-top: 1px solid #97b0b1;
border-bottom: 1px solid #97b0b1;
background-color: #00FF00;
z-index: 2;
}
#progress-total-text {
position: relative;
color: black;
top: 30%;
font-size: 15px;
z-index: 3;
}
问题是,您在文本上显示了动画div。
所以我把文本放在动画上,然后在后面放一个透明的背景。
我将灰色背景应用于容器。我还更改了它的高度,并将height:100%
应用于它的孩子
您需要更改的一件事是从
$(description).attr('id','progress total text')中删除#
代码>。您正在为span分配一个以#
开头的ID。啊,这只是JSFiddle中的一个错误。这不是真实的版本。不过接得不错!关于attr行中的#很好的捕捉,这只是我在编写模型时的一个错误。不过,您发现了真正的错误——不正确的分层——但我不确定为什么它适用于所有其他进度条(它们以相同的方式配置)。无论如何,谢谢你的帮助!你让我免去了巨大的头痛。@SamuelMS不客气,我的好先生。如果您还没有使用它,我建议您安装一个元素检查器,比如firefox的Firebug(Safari、Chrome、IE已经安装了)。右键单击元素,可以直接访问属性。这就是我注意到文本位于动画层下面的原因。干杯