パーセンテージの数値をmarginTopにアニメーションするピクセル値

Question

パーセンテージの値をピクセルに変換し、JQueryアニメーションを使用してdivを上向きに移動する必要があります。上方向に移動する必要のあるグラフィックを含むdivは、268ピクセルの高さを持ちます（これが100％です）。

は、一例として、私が

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

（周りに101ピクセルであるべきである）画素値に変換し、上向きに画素の数へのid prog_animとDIVを移動する必要が開始パーセンテージ値として38％を入れ私は上記の構文が間違っている見当がつかない総Javascriptのnoobのもの

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

：

は、その後、私は次のアクションを実行するボタンのリンクを持っています。誰でもここで私を修正できますか？ありがとう！

Answer 1

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

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

そして、あなたのボタンを。

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

Answer 2

改善のためにいくつかの領域があります。

ハードコード268の代わりにvar graphicHeight = $("#prog_anim").outerHeight();を使用してください。

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

ので：

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

Answer 3

はresultIncが、それはあなたが上方に移動し、下向きに与える高さを向上させることができ、これを使用して

を成長することにより、ピクセル数である

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

これを試してみてくださいそれが上に成長した印象