Динамически захватить позицию div

Question

Есть ли способ отобразить / зафиксировать верхнее значение div в то время, когда оно изменяется по мере анимации, как на вкладке Элементы инструментов разработчика Chrome? Я пробовал getComputedStyle и getPropertyValue, но не работает. Это то, что я пробовал до сих пор

var top_sq = document.getElementById("square"),
style_sq_top = getComputedStyle(top_sq),
sq_top = style_sq_top.getPropertyValue("top"),
act_sq_top = sq_top.substring(0, 3);

var tv = document.getElementById("top_value").text = sq_top;

$("#btn1").click(function(){
$("#square").animate({top:"300px"}, 3000);
 tv.toString;
});

http://jsfiddle.net/QYVQT/

Answer 1

Проблема с предоставленным вами кодом заключается в том, что tv не изменяется динамически, так как окно анимировано. Помните, sq_top это просто число. Когда вы установите tv равно sq_topВы устанавливаете его равным числу. Таким образом, значение tv не меняется при перемещении коробки.

Вместо этого пересчитывайте это каждый раз. Вы можете использовать progress собственность .animate() Функция для этого. Смотрите здесь: http://www.bennadel.com/blog/1856-using-jquery-s-animate-step-callback-function-to-create-custom-animations.htm.

Код с использованием $.progress() функция:

var square = document.getElementById("square"),
    squareTop = null,
    squareTopString = null,
    tvDiv = document.getElementById('top_value');

$("#btn1").click(function(){
    $("#square").animate(
        {top:"300px"},  
        {
            duration: 3000,
            progress: function(){
                /* get the top of the square */
                squareTop = square.style.top;
                /* format it correctly */
                dotLoc = squareTop.indexOf('.');
                if(dotLoc == -1){
                    squareTopString = squareTop;
                } else{
                    squareTopString = squareTop.substring(0, dotLoc) + 'px';
                }
                /* display the current top position, e.g. "200px" */
                tvDiv.innerHTML = squareTopString; 
            },
            easing: "swing"
        }
    );
});

И скрипка: http://jsfiddle.net/KLhzp/3/

Answer 2

Вот пример использования jQuery animate() "s step() Перезвоните.

var top_sq = document.getElementById("square"),
    style_sq_top = getComputedStyle(top_sq),
    sq_top = style_sq_top.getPropertyValue("top"),
    act_sq_top = sq_top.substring(0, 3);

var $tv = $("#top_value")
$tv.text(act_sq_top);

$("#btn1").click(function () {
    $("#square").animate({
        top: "300px"
    }, {
        duration: 3000,
        step: function (now, fx) {
            pos = Math.round(now);
            $tv.text(pos);
        }
    });
});

А вот и скрипка http://jsfiddle.net/QYVQT/2/