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 に答える