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

Question

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

0

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

user35859 09 май 2014, в 02:20

Источник

0

Попробуйте использовать - шаг или прогресс - « animate » api.jquery.com/animate или используйте событие animationIteration css-tricks.com/…
keypaul 08 май 2014, в 23:40
2

Спасибо вам, ребята. Они оба отвечают на мой вопрос, и мне кажется, что я должен отдать чек Амадею, потому что он первым отправил трубку.
user35859 09 май 2014, в 00:10

Теги:

jquery

css

2 ответа

0

Здесь приведен пример использования jQuery animate() 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/

Will 08 май 2014, в 22:02

Ещё вопросы

Попробуйте использовать - шаг или прогресс - « animate » api.jquery.com/animate или используйте событие animationIteration css-tricks.com/…
Спасибо вам, ребята. Они оба отвечают на мой вопрос, и мне кажется, что я должен отдать чек Амадею, потому что он первым отправил трубку.

Chris Middleton · Accepted Answer · 2014-05-08T21-04-00.000Z

Проблема с кодом, который вы указали, заключается в том, что 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/