Javascript 实时设置元素的动画

我需要实时知道img的位置，以便在上升或下降时改变其位置。目标将在开始时将其动画设置为底部40px，然后再将其动画设置为顶部

到目前为止，我的代码如下：

var pos = $('header img').offset().top;

if( pos == 0) {
   $('header img').animate({"top": "+=40px"}, 6000);
}else{
    $('header img').animate({"top": "-=40px"}, 6000);
}

有什么想法吗？

您可以使用进度选项实时检测位置。我还做了一些更改，这样您就不必使用太多重复的代码：

$('#startAnimation').on('click', function () {
    var pos = $('header #img').offset().top;

    if (pos == 0) {
        doAnimate("+=40px");
    } else {
        doAnimate("-=40px");
    }
});

function doAnimate(to) {   
    $('header #img').animate({
        top: to
    }, {
        duration: 6000,
        progress: function (promise) {
            console.log('offset top: ' + $('header #img').offset().top);
        }
    });
}

小提琴：

您还可以将其更改为使用动画中的“开始”和“完成”选项。更多信息：

---

编辑：拨弄错误

太好了，不知道进度选项。非常感谢。这就是你要找的？在上升或下降时，为了改变它的位置，确切的意思是什么？你在寻找什么？循环它的运动？或者仅仅是在一些事件上，比如单击设置/重置最终位置？因为没有看到代码的其余部分，或者至少不知道您的意图pos>0并反转+-就足够了。@Roko C.Buljan我的意图是模拟这样一个背景图像的自动动画：一个图像，在两个方向上，上下。