Javascript 由动画DIV隐藏的跨距文本，不考虑z索引

我正在做我的一个爱好项目——它有点像是一个荣耀的RSS提要阅读器/抓取器。我已经能够让大多数东西工作，但由于某种原因，我无法在动画div上方绘制特定跨度内的文本

抓取进纸时，在显示结果之前会执行某些操作。在此期间，我跟踪进度并将其显示在动画“进度条”div中。所有子操作都有自己的进度条，并且它们都正常工作（进度条顶部的文本），但最终的进度条（总体进度）无法正确分层文本

我创建了一个例子来说明我的问题

$('#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已经安装了）。右键单击元素，可以直接访问属性。这就是我注意到文本位于动画层下面的原因。干杯