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

Question

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

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

当然，元素在CSS中获得了所有过渡，因此.css变成了动画。然后我尝试像这样获得电流偏移：

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

问题是偏移量在动画过程中不会自动更新。我想在某个位置捕捉元素。

提前感谢！

Answer 1

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

$("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);
});