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

我需要一个百分比值，将其转换为像素，并向上移动一个div，使用JQuery动画制作我正在尝试构建的进度条。包含需要向上移动的图形的div具有268像素高度（所以这是我们的100％）。将百分比数转换为marginTop动画像素值

作为一个例子，我把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小白我根本不知道上面的语法是错误的。任何人都可以在此纠正我？谢谢！

2012-04-26 masbass

试试这个：

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

和你的按钮;

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

2012-04-26 08:24:24 Nadh

其实这工作正常，我只需要mov在相反的方向。它现在向下移动，而我需要它向上移动。如何让“像素”变量为负数？谢谢！ – masbass 2012-04-26 08:40:02

'var pixels = -1 *（percent/100 * height）;' – Nadh 2012-04-26 08:46:46

nvm，无论如何发现它，谢谢你的帮助！ – masbass 2012-04-26 08:47:28

我看到改善的几个领域。使用var graphicHeight = $("#prog_anim").outerHeight();而不是硬编码268。

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

所以：

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

2012-04-26 08:24:54 Jordan

尝试了这一点

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

凡resultInc是由它的增长

使用这个，你可以向上移动，并增加高度向下给人的像素数它的长大的印象

2012-04-26 08:40:44 DRAKO

回答