Плавно установленный край-край для div

Question

Я попытался плавно перемещать div (круг), но я не могу этого сделать. Div немедленно перемещается в последнюю точку.

Я попытался имитировать процесс падения шара. Я использовал метод animate со вторым параметром 0, но это не помогло мне. Как это сделать?

"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.