How to get X and Y position in jQuery animation
I'm familiar with getting the X and Y coordinates from the mouse position, however, I animate with the translate and rotate CSS transform functions. Is it possible to get the X and Y positions of an animation when you are not using mouse events? The image moves down and rotates at the same time, I would like to see its X and Y position, since I want to add a fadeout () function at a specific coordinate. The X-position is zero here, but I'll change it too. That's what I have so far
$(document).ready(function(){
var logoVar = $('#logo');
var rotateVar =0;
$({translateVar: 0, rotateVar: 0}).animate(
{
translateVar: 200,
rotateVar: 360
},
{ // animate method options below
duration: 5000, // 5 seconds for the entire animation
step: function(now, abc){
if(abc.prop == 'translateVar')
translateVar = now;
else if(abc.prop =='rotateVar')
rotateVar =now;
logoVar.css('transform', 'translate(0px, ' + now + 'px) rotate(' + rotateVar + 'deg)' );
}
});
});
+3
user4530879
source
to share
1 answer
You can use offset()
for example for Y:
logoVar.offset().top
Then for X you use:
logoVar.offset().left
And since everyone loves the API documentation as a source: http://api.jquery.com/offset/
0
source to share