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

Question

Есть ли способ отображать/захватывать верхнее значение divs, когда оно изменяется, когда оно анимируется, аналогично инструментам Chrome dev. Вкладка Elements? Я пробовал 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/