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

【问题标题】：Update element offset during css animation jQuery在css动画jQuery期间更新元素偏移量
【发布时间】：2025-12-12 12:00:01
【问题描述】：

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

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

当然元素在 CSS 中得到了所有的转换，所以 .css 变成了动画。然后我试图获得这样的当前偏移量：

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

问题是动画期间偏移量没有自动更新。我想在某个位置捕捉元素。

提前谢谢！

【问题讨论】：

制作动画时是否要获取元素的offset？
是的，我想让它在每个像素上保持更新——因为我需要将它与其他值进行比较，当它达到该值时就会触发一些东西

标签： jquery css animation offset

【解决方案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>

【讨论】：

是的，我知道，但是 css 动画对我来说效果更好，性能也更好。只是想找到类似“css animation in progress”事件

【解决方案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);
});

【讨论】：