Question

我正在尝试在css动画期间获取元素的当前偏移量。我正在通过像这样的jquery发射动画：

$('.left').css('margin-left', '50%');

当然，元素获得了CSS中的所有转换，因此.css变成了动画。然后我试图获得当前的偏移：

var left = $( ".left" );
var Loffset = left.offset();
console.log(Loffset.left);

问题是在动画期间不会自动更新偏移。我想在某个位置抓住元素。

Thnx提前！

Answer 1

您可以使用jquery step中的animate()属性获取元素的当前偏移量。

$("div").animate({
    "margin-left": "50%"
},{
    duration: 3000,
    step: function(){
        console.log($(this).offset().left);
    }
});

div {
    width: 100px;
    height: 100px;
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 2

我找到了办法来做到这一点。首先，我做了一个不断激发的功能：

var myFunction = function() {
        var left = $('.left');
        var Loffset = left.offset();
        console.log(Loffset.left);
        if (windowWidthQuarter == Loffset.left) {
            /* here goes code */        
        }
};
var timer = setInterval(myFunction, 0);

它每0毫秒检查一次偏移（不停）。然后，当转换结束时，我将其关闭：

$(".left").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
     clearTimeout(timer);
});

在css动画jQuery期间更新元素偏移

2 个答案: