如何在jQuery动画中获取X和Y位置

Question

我了解如何通过鼠标位置获取X和Y坐标，但是我正在使用CSS transform中的 "translate" 和 "rotate" 函数进行动画。当您不使用鼠标事件时，是否可以获取动画图像的X和Y位置？该图像同时向下移动并旋转，我想查看其X和Y位置，因为我想在特定坐标处添加fadeout()函数。这里的X位置为零，但我也将更改它。以下是我现在所拥有的:

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

});

- user4530879

Answer 1

你可以使用offset()，对于Y轴来说：

logoVar.offset().top

然后你可以使用以下代码来处理X：

logoVar.offset().left

还有，因为每个人都喜欢将API文档作为参考：http://api.jquery.com/offset/

- gabe3886