javascript - パーセンテージ数をピクセル値でマージントップアニメートに変換する

Question

パーセンテージ値を取得し、それをピクセルに変換し、作成しようとしている進行状況バーの JQuery animate を使用して div を上に移動する必要があります。上に移動する必要があるグラフィックを含む div の高さは 268 ピクセルです (これが 100% です)。

例として、ピクセル値に変換する必要がある開始パーセンテージ値として 38% を入力し、id prog_anim の div をそのピクセル数の上に移動します (約 101 ピクセルにする必要があります)。

var result = 38 / 100 * 268;
function bgr_animate(result) {
    $('#prog_anim').animate({
    'marginTop' : result
    });
}

次に、アクションを実行するボタンに次のリンクがあります。

a href="javascript:;" onclick="bgr_animate(result)"

完全なJavascript初心者であるため、上記の構文がどこで間違っているのかわかりません。誰かがここで私を修正できますか? ありがとう！

score 1 · Accepted Answer

改善すべき点がいくつかあります。

268 をハードコーディングする代わりに、を使用しますvar graphicHeight = $("#prog_anim").outerHeight();。

上に移動したいので、余白の上部の方向を逆にする必要があります。marginTop はそれを行う 1 つの方法ですが、CSSposition: absolute;を設定し、marginTop の代わりに top を使用することをお勧めします。

そう：

var result = -(38 / 100 * graphicHeight);

score 0 · Accepted Answer

これを試して：

function bgr_animate(percent, height) {
    var pixels = percent / 100 * height;
    $('#prog_anim').animate({
        'marginTop' : pixels
    });
}

そしてあなたのボタン;

<a href="javascript:;" onclick="bgr_animate(30, 268)">

score 0 · Accepted Answer

これを試してみてください

$('#prog_anim').animate({
      height: result
      top:-=resultInc
      }, 5000, function() {
     alert("Animated");
});

ここで、resultInc は成長するピクセル数です。

これを使用すると、上に移動し、下に高さを増やして、上に成長したような印象を与えることができます

3 に答える 3