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


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







All Articles