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

【问题标题】：Converting percentage number to marginTop animate in pixels value将百分比数字转换为 marginTop 动画像素值
【发布时间】：2012-04-26 08:19:23
【问题描述】：

我需要获取一个百分比值，将其转换为像素，然后使用 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 菜鸟，我不知道上面的语法哪里错了。有人可以在这里纠正我吗？谢谢！

【问题讨论】：

【解决方案1】：

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

使用var graphicHeight = $("#prog_anim").outerHeight();，而不是硬编码268。

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

所以：

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

【讨论】：

【解决方案2】：

试试这个：

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

还有你的按钮；

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

【讨论】：

【解决方案3】：

试试这个

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

其中 resultInc 是它增长的像素数

使用它你可以向上移动并向下增加高度，给人一种向上生长的印象

【讨论】：