连续返回元素的位置

Question

我有一个物体，它是动画的，从窗口的顶部落到窗口的底部。这可以很好地工作，但我想连续返回元素的位置。

目前，我有以下代码

var pos = function() {
    console.debug(jQuery('.element').position());
}
jQuery(window).on('mousemove', pos);

它会在鼠标移动时返回"element“类的位置，我也尝试过"live”事件处理程序，但它不起作用。

有没有什么事件处理程序可以用来连续返回元素的位置？谢谢

Answer 1

使用.animate()的step回调来跟踪您想要的任何内容，从位置到时间：

​

var $test = $("span");
$("#element").animate({ top: 300 }, { 
  duration: 5000, 
  step: function(now, fx) { 
    $test.text( now );
  }
});

#element{
  position:absolute;
  top: 0;
  background:red;
  width:40px;
  height:40px;
}

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

​

http://api.jquery.com/animate/

一个小建议，如果你不想把手指弄得到处都是jQuery……

jQuery(function( $ ){ // DOM ready and jQuery $ alias secured

    // Free to use $ as you usually would

});

Answer 2

您可以使用setInterval以给定的时间间隔执行函数。

setInterval(function () {
    // do something here
}, 1000); // each 1 sec, starts after 1s