Question

我正在开发一个我的爱好项目 - 这是一个美化的RSS提要阅读器/抓取器。我已经能够让大多数事情发挥作用，但由于某种原因，我无法将某个范围内的文本绘制在动画div之上。

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

我创建了一个simple mock-up in 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％（反之亦然）。动画完成后，将创建一个新的子跨度并将其附加到“空条”背景div，其中显示总百分比（在这种情况下为100％）。

重置栏时，有意删除此span元素。

你们对于出了什么问题以及如何解决这个问题有什么想法吗？

我在Chrome和Firefox中都遇到此错误。

提前致谢！

Answer 1

这里有很多问题。

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

 $(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%应用于它的孩子们。

Here's a full fiddle

动画DIV隐藏的跨度文本尽管z-index

1 个答案: