Span文本隐藏的动画DIV尽管z索引

Span Text Hidden by Animated DIV Despite z-index

本文关键字：尽管 索引 DIV 动画 文本 隐藏 Span      更新时间：2023-09-26

我正在做我的一个爱好项目——它是一个美化的RSS提要阅读器/抓取器。我已经能够让大多数事情工作，但由于某种原因，我不能让文本在一定的跨度上绘制一个动画div。

当抓取提要时，在显示结果之前执行某些操作。在此期间，我跟踪进度并将其显示在动画"进度条"div中。所有子操作都有自己的进度条，并且它们都正常工作(文本在栏上)，但最终的进度条(总体进度)没有正确地分层文本。

我在JSFiddle中创建了一个简单的模型来给出我的问题的示例。

$('#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%(反之亦然)。当动画完成时，将创建一个新的子span并将其添加到'empty bar'背景div中，其中显示总百分比(在本例中为100%)。

这个span元素被有意地移除。

你们知道什么地方出了问题，我该怎么解决吗?

我在Chrome和Firefox中都遇到了这个错误。

提前感谢!

这里有很多问题。

首先，您需要从这一行中删除# 

 $(description).attr('id', 'progress-total-text');

新的span，从来没有得到它应该得到的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%应用于它的孩子。

这是一个完整的小提琴

相关文章：