원활하게 마진 - 위쪽 div 설정

Question

원활하게 div (원) 이동하려고했지만 할 수 없습니다. Div가 즉시 마지막 지점으로 이동합니다.

공이 떨어지는 과정을 시뮬레이션 해 보았습니다. 두 번째 매개 변수 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.