将百分比数转换为marginTop动画像素值

Question

我需要取一个百分比值，将其转换为像素并使用JQuery动画向上移动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 noob我不知道上面的语法错在哪里。谁能在这里纠正我？谢谢！

Answer 1

我看到了一些需要改进的地方。

使用var graphicHeight = $("#prog_anim").outerHeight();。

而不是硬编码268

您需要反转边距顶部的方向，因为您希望它向上移动。 marginTop是一种方法，但设置CSS position: absolute;并使用top而不是marginTop会更好。

所以：

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

Answer 2

试试这个：

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

和你的按钮;

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

Answer 3

试试这个

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

其中resultInc是其增长的像素数

使用此功能，您可以向上移动并向下增加高度，从而产生向上增长的印象