2

我正在做我的一个爱好项目——它是一个美化的 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%（反之亦然）。动画完成后，将创建一个新的子跨度并将其附加到“空栏”背景 div，其中显示总百分比（在本例中为 100%）。

重置栏时有意删除此跨度元素。

你们对出了什么问题有任何想法，我该如何解决？

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

提前致谢！

4

1 回答 1

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%它的孩子。

这是一个完整的小提琴

于 2013-05-16T20:05:04.353 回答