Question

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

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

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

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

有什么想法吗？

Answer 1

您可以使用progress选项来检测实时位置。我也进行了一些更改，因此您不必使用如此多的重复代码：

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

小提琴：http://jsfiddle.net/z3jk1g0z/

您也可以将其更改为使用start中的complete和animate选项。更多信息：http://api.jquery.com/animate/

编辑：错误的小提琴

实时动画元素

1 个答案: