divに円滑に余白を設定

Question

円滑にdiv（円）を移動しようとしましたが、できません。 Divは直ちに最後のポイントに移動します。

私はボールの落下のプロセスをシミュレートしようとしました。 2番目のパラメータ0でメソッドanimateを使用しましたが、これは私を助けませんでした。 どうすればいいですか？

"use strict"; 

function calculateH(h, t) { 
    return h - ((Math.pow(t, 2)*9.8)/2); 
} 

/** 
* [getTrip function is calculate Y coordinates for the ball thrown down] 
* @param {[number]} h   [The height from which the ball falls] 
* @param {[number]} t   [Time elapsed from the beginning of the fall of the ball] 
* @param {[number]} interval [EPS] 
* @param {[number]} k   [Ratio of height to screen height. It is necessary that the ball fell to the site bottom] 
* @return {[array]}   [Array of Y coordinates. {0, 0.2, 1.2 ... h}] 
*/ 
function getTrip(h, t, interval, k) { 
    var calculations = new Array(); 

    for(t; calculateH(h, t) > 0; t += interval) 
     calculations.push((h - calculateH(h, t))*k); 

    return calculations; 
} 

$('document').ready(function() { 
    var bol = $('#mycircle'); 

    var h = 100; 
    var t = 0; 
    var interval = 0.001; // eps 

    /** 
    * [k is the ratio of height of the screen to start the ball drop height] 
    * @type {[number]} 
    */ 
    var k = ($(document).height()-bol.height())/h; 

    var calculations = getTrip(h, t, interval, k); 

    // Problem is there. 
    // I want animate of fell ball, but this code just move in last Y coord. 
    calculations.forEach(function(y) { 
     bol.css({'margin-top': y+'px'}); 
    }); 

    bol.animate({'margin-top': h*k+'px'}, 1); // prees to the bottom 
}); 

https://jsfiddle.net/82agzc2e/4/

Answer 1

なぜあなたは、ループを使用していて、最後の位置に直接margin-topをアニメーション化しませんか？答えを

bol.animate({'margin-top': calculations[calculations.length - 1]+'px'}, 1000); 

Working example.