CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DevStacker
DevStacker

Reputation: 735

returning the position of an element continuously

I have an object which is animated and falling from the top of the window to the bottom of the window. this works fine, but I would like to return the position of the element continuously.

At the moment I have this code

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

Which returns the position of the class "element" when the mouse is moving, I have also tried the event handler "live" but it is not working.

Is there any event handler I can use which will continuously return the position of them elemnt? Thank you

Upvotes: 0

Views: 78

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

Use .animate()'s step callback to track whatever you want, from position to timing:

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/

A small suggestion, if you don't want to lose your fingers writing jQuery all over the place....

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

    // Free to use $ as you usually would

});

Upvotes: 2

Emil A.
Emil A.

Reputation: 3445

You could use setInterval to execute a function at given interval.

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

Upvotes: 1

Related Questions