title: Smoothly set margin-top to div
body: <p>I tried to smoothly move div(circle), but I can not do it. Div immediately moves to the last point. </p>
  
  <p>I tried to simulate the process of the ball falling.
  I used method animate with second param 0, but this did not help me.
  How to do it?</p>
  
  <pre><code>"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) &gt; 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
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/82agzc2e/4/" rel="nofollow">https://jsfiddle.net/82agzc2e/4/</a></p>